Klavye Erişilebilirliği için UX İyileştirmeleri

Diğer kullanıcıların deneyimini etkilemeden yalnızca klavye kullanan ve yardımcı teknoloji kullanıcıları için erişilebilir bir kullanıcı deneyimini nasıl sağlayabiliriz? Deque Systems Baş UX Tasarımcısı Aaron Pearlman'dan, kullanıcılarımıza kapsayıcı ve erişilebilir bir deneyim sunduğumuzdan emin olmak için bazı pratik araç ve teknikleri paylaşmasını rica ettik.

Smashing Üyeliğimizin bir parçası olarak, her hafta bir dizi canlı web semineri olan Smashing TV düzenliyoruz. Kabartmak yok - sadece sektörden saygın uygulayıcılar tarafından yürütülen canlı Soru-Cevap içeren pratik, eyleme geçirilebilir web seminerleri. Gerçekten de, Smashing TV programı şimdiden oldukça yoğun görünüyor ve Smashing Üyeleri için kayıtlarla birlikte ücretsiz - açıkçası .

Web seminerinden bizim aldığımız kadar keyif alacağınızı umuyoruz!

Aaron Pearlman: Ekranımı görebilmelisin. Tamam, hemen şimdi, izin verin... İşte başlıyoruz, çok güzel. Herkese merhaba. Dediğim gibi, ben Deque'nin Baş Kullanıcı Deneyimi Tasarımcısı Aaron Pearlman'ım. Ve sanırım— Ah, bırak hareket edeyim— Zoom, yoluma biraz kullanıcı arayüzü koyuyor, bu yüzden çılgınca hareket ediyormuş gibi görünüyorsam ve umarım görünmüyorsa özür dilerim. Ve bugün, Yalnızca Klavye ve Yardımcı Teknoloji kullanıcıları için yapabileceğiniz optimizasyon türleri hakkında konuşacağız. Biraz önce bahsettiğim gibi, bu tip optimizasyonlar, bu tip şeyler başka kimsenin senin kullanmasını engellemeyecek... bunlar başkaları tarafından da kullanılmayacak. Yalnızca, yalnızca Kullanıcıya Yardımcı Teknoloji klavyeli bir sistemi baskın olarak kullanan kullanıcılar için daha avantajlı olacak şeyler olma eğilimindedirler.

Aaron Pearlman: Bunun ne anlama geldiğine aşina olmayanlar için, Yalnızca Klavye Kullanıcısına Yardımcı Teknoloji nedir - yalnızca klavye kullanıcısı, bir sistemde gezinmek için tipik olarak klavyenizi kullanan biri olacaktır. Bu nedenle, sisteminizde gezinmek için sekme ve Shift sekmesini ve ok tuşlarını çok kullanacaklar, bu nedenle odaklanma onlar için oldukça önemlidir. Bu kişinin motor beceri sorunları olabileceğini, aynı zamanda görme yetersizliklerine sahip olabileceğini, yalnızca klavye kullanıcıları olduğunu ve daha sonra yardımcı teknoloji kullanıcılarının sisteminizde gezinmek için bir klavye kullandığını, ekran gibi diğer yardımcı teknolojileri de kullanabilirler. VoiceOver veya braille okuyucu veya bunun gibi bir şey gibi sayaçlar.

Aaron Pearlman: Yani, odaklandığımız şey bu - bu tür kullanıcılarımız çünkü engelli bireylerin büyük bir kısmı bu kampa girme eğiliminde. Bu herkes anlamına gelmez. Elbette, aralarında sayısız farklı engel ve dereceler vardır, ancak bunun için bugün üzerinde duracağımız şey bu.

Aaron Pearlman: Yani, ele alacağımız konuya biraz genel bir bakış: biraz tasarım sürecinden bahsedeceğiz ve belki de biraz egzersiz yapıyoruz. atlama bağlantılarına gitmeden önce girebilir, belki girmez. Ve sonra atlama bağlantıları, ele alacağımız özelliklerden biri olacak, modunuzu optimize etmenin yolları ve odaklamanın nasıl ele alınacağı. Bunlar ele alacağımız üç büyük kategori olacak ve işimiz bittiğinde sorular için zamanımız olacak.

Aaron Pearlman: Başlangıç ​​olarak, biraz UX tasarım sürecine genel bakış yapabileceğimizi düşündüm. Farklı atölyelerde ve işlerde bulundum, çok sayıda farklı disiplinden sayısız farklı kişinin olduğunu görüyorum, herkes bir kullanıcı deneyimi tasarımcısı değil, bu nedenle birçok UX tasarımcısının kullandığı sürece aşina olmayabilirler. Bunun için, bunun üzerinden kısaca geçeceğimizi düşündüm, üzerinde çok fazla zaman harcamayacağız, ancak kısaca üzerinde durmakta fayda görüyorum. Ayrıca, erişilebilir bir şekilde tasarlamaya da bağlanacağı için. Bu nedenle, çoğu UX tasarımı keşif adı verilen bir süreçten geçme eğilimindedir, buna her zaman keşif denmez, bazen hızlı fikir oluşturma, hızlı yineleme olarak adlandırılır. Birçok insan bunun için farklı isimlere sahiptir, ancak mesele şu ki, üretimin çoğunun gerçekleştiği tasarım sürecinin bir parçası.

Aaron Pearlman: Çoğu zaman farklı fikirlerin ve gereksinimlerin toplandığı, çok fazla araştırma ve bunu kurumsal hedeflerinizle sentezlediği ve tüm bu bilgilerle filtrelediği ve bundan çıkanların tipik olarak olduğu bir zamandır. yapacağımız sistemi veya yapacağımız özellikleri inşa etmemize izin veren eserler. Bunlar - her zaman değiller - ama prototip gibi şeyler olma eğilimindedirler, bazen onlardan çıkacak zihinsel modeller de görürsünüz. Ancak, hedef kullanıcınızın hedeflerine nasıl ulaşacağının bir yansıması olan, bir dereceye kadar aslına uygun bir prototip. TLDR, yinelenen tasarımdır ve kullanıcılarla test edip yineliyoruz, kullanıcılarla test ediyoruz, yineliyoruz, kullanıcılarla test ediyoruz ve sonunda inşa edilecek.

Aaron Pearlman: Bunun önemli olduğunu düşünüyorsunuz, erişilebilirlikle ilgili hususlar, bu tasarım süreci boyunca erişilebilirlik hakkında düşünmek ve yapmak istediğimiz şeydir. Ve farklı seviyelerde sadakat, farklı şeyler hakkında düşünerek hak edebilir, bu gerçekten bağlıdır. Buna çok fazla girmeyeceğim, ancak genel olarak, bu buluşsal yöntemleri ve yöntemleri dahil etmek istiyoruz ve tasarımcılar olarak, zaman içinde erişilebilirlik gücümüzü artıracağız, tıpkı bizim iyi olma gücümüzü büyüttüğümüz gibi. zaman içinde kullanıcı deneyimi tasarımcısı. Başlangıçta, WCAG 2.1'i okuyacağınız, ardından ARIA spesifikasyonunu okuyacağınız ve sonra işiniz bitmiş olacak ve bir daha hata yapmayacaksınız diye bir beklenti yok, ya da tasarımlarınız ve erişilebilir tasarımlarınız söz konusu olduğunda hiçbir şeyi kaçırmayacaksınız. Bu, hayal gücünün herhangi bir uzantısı tarafından mutlaka makul değildir.

Aaron Pearlman: Sadece zamanla öğreneceğinizi bilin. Erişilebilirlik konusunda hala hatalar yapıyorum ve üzerinde çalıştığım her şey daha iyiye gidiyor. Yani [duyulmuyor] çünkü her zaman erişilebilir bir şekilde tasarlıyorum. Bu nedenle, bugün üzerinde çalışacağımız şeyle alakalı olmasına rağmen küçük bir fişin adı Trane. Bu, Deque'deki tamamen erişilebilir desen kitaplığımızdır, onu kendi ürünlerimizi oluşturmak için kullanırız. Bu bir HTML, CSS ve JavaScript ön uç çerçevesidir, daha önce böyle bir şey kullandıysanız Bootstrap'a oldukça benzer. Ayrıca kardeş kitaplık olan bir tepki kitaplığımız da var. Ekibimiz tepkisel olarak gelişir. Ancak bugün burada örnek olarak birkaç şeye bakacağız. Ama bu açık kaynak, mevcut, bu destenin sonunda herkese açık hale getireceğim bir bağlantı olacak.

Aaron Pearlman: Ve kullanmak ve almak dalları almak ve onu istediğiniz gibi kullanmak veya katkıda bulunmak sizin için ücretsizdir, buna bir katkı da görmek isteriz. Yani sadece küçük bir fiş, ama ilerledikçe ona atıfta bulunacağız. Bu yüzden bakacağımız ilk şey, atlama bağlantıları. Ve atlama bağlantısının ne olduğunu bilmeyenler için, atlama bağlantıları, bir web uygulamasında veya web sitesinde ilk sekme durağı olarak görünme eğiliminde olan küçük bağlantılardır. Ve yapmanıza izin verdikleri şey, web sitesinin bölümlerini atlamanıza izin vermek. Bunu neden yapmak isteyesin ki?

Aaron Pearlman: Peki, gerçekten zengin menüsü olan bir web siteniz varsa, bu büyük bir reklam panosu menüsü olabilir veya çok fazla içeriği olabilir, Yalnızca Klavye veya Yardımcı Teknoloji Kullanıcısıysanız, buna ulaştığınızda siteniz ve VoiceOver'ınız onu okumaya başlar, hatta belki görmemiş bir kullanıcısınız, sadece klavyenizi kullanırsınız, aşağı inmek için tüm bu farklı öğeler arasında sekme döngüsü yapmanız gerekecek. orada yaptığınız aktivite ne olursa olsun, başlamak istediğiniz içeriğe veya çalışma alanına. Ve böylece, bir atlama bağlantısının yapmanıza izin verdiği şey, tipik olarak, o uygulamanın çalışma alanı alanına ulaşmak için tipik olarak gezinmeyi atlamaktır.

Aaron Pearlman: Bazen birden fazla bağlantı olabilir ve genellikle yalnızca bir tanesini görebiliriz, ancak elimizde bazı örnekler var. Size birden çok atlama bağlantısını nerede kullanabileceğinize dair bir örnek göstereceğim. Bu yüzden, birkaç farklı türde Atla bağlantısına veya birkaç farklı türde atlama bağlantısına bakabileceğimizi düşündüm ve sonra atlama bağlantısı olmayan başka bir sayfaya bakacağız ve belki biraz nerede olduğu hakkında konuşacağız. orada faydalı olabilir. İlk bakacağımız şey, umarım ekranımı görebilirsin. İlk bakacağımız şey, deque.com'da kullandığımız bu atlama bağlantısı ve bunun ne olduğu, benim yer değiştirme öğesi dediğim, sayfanın yerini değiştirmesidir. Buraya girdiğimde, atlama bağlantısının orada olduğunu görebiliyorum ve bana içeriğe atlamamı söyleyecek.

Aaron Pearlman: Ve bunu seçtiğimde, beni aşağıdaki içeriğe gönderecek ve ben buna yer değiştirme diyorum çünkü kelimenin tam anlamıyla kendini yerleştirip gizler ve kendini oraya yerleştirir ve yerinden eder. Bu, içeriğimiz için kullanmayı seçtiğimiz atlama bağlantısıydı, ancak çok yaygın olan bir bağlantı. Kendisini bir web sitesinin veya web uygulamasının en üstüne eklediğini göreceksiniz. Bir sonraki bakacağımız site, eminim ki birçoğunuzun oldukça sık kullandığı veya kullandığı bir site. Bu Amazon, atlama bağlantılarına bakacağız. Oraya sekme yaptığımda, sol üst köşeye bakarsanız, üst üste bindirildiğini görürsünüz, bu bir bindirme stilidir, bu çok, çok yaygın bir yerde içeriği kaplar ve bu yüzden genellikle ne olursa olsun atlar. arkasındaki ana içeriğe atlamayı göstermek için.

Aaron Pearlman: Yer değiştirme ile üst üste bindirme arasındaki artılar ve eksiler göz ardı edilebilir. İçeriğinizin asla karartmak istemediğiniz bir şey olduğunu fark ederseniz, o zaman bir şey eklemek ve onu kullanmak isteyebilirsiniz, birinciyi yer değiştirme, tam tersi, önemli değil, bu da sorun değil. Arapça içerik gibi sağdan sola okunan bir içerik tasarlıyorsanız, atlama bağlantınızı sağ üst köşeye koyabilirsiniz, buna değer olabilir. Gerçekten neyin uygun olduğuna iniyor. Ama nihayetinde, bu takdir kendi ekibindeki tasarımcıya ait olacaktır. Bu, tek bir atlama bağlantısı olan iki atlama bağlantısına bir örnek ve ben de size atlama bağlantısının içinde birden çok seçeneğin olduğu bir yeri göstereceğimi düşündüm.

Aaron Pearlman: Bu örneği açacağım, bu bizim desen kitaplığımızdan. Şimdi bu özel örnek için, aslında bunun için birden fazla atlama bağlantısı olan bir şey tasarlamazdım çünkü gerçekten hak etmiyor, ancak bunu sadece göstermek amacıyla yaptık. Bu yüzden sol üst köşede sekme yapacağım, burada size iki atlama bağlantısını gösteren bir bindirme kullanıyoruz. Ve bunlar buranın içindeki sekme durakları, yani sekmeye tekrar basarsam bir sonraki sekmeye geçeceğiz ve sekmeyi kaldırırsam gidecek. Tekrar sekme yaparsam, ayrılacak ve orada en üstteki başlığa gidecek. Sekmeyi geri kaydıracağım, sekmeyi geri kaydıracağım, böylece buraya girip çıkabileceğimizi görebilelim.

Aaron Pearlman: Ve sonra ben de bunlardan birine gireceğim, böylece görebileceksiniz. Ve bu noktada onu seçtiğimde ne oluyor, beni çalışma alanı alanına gönderiyor ve aslında o çalışma alanı alanına odaklanıyor. Pek çok web uygulaması için göreceğiniz şey, aslında odağın kendisini göstermedikleridir, uygulamalarımızda bunun tabiri caizse öğelerin bir odağı olmadığını göstermek istedik, ancak bu biraz zaman alabilecek bir şey. odak. Ve sonra buradan, odaklanacağız ve sonra oradaki tüm öğelerin odak noktası olan farklı öğelere gidebiliriz, [duyulmuyor 00:12:28] öğeler. Bunlar, bağlantıları atlamanın birkaç farklı yolunun örnekleridir.

Aaron Pearlman: Dediğim gibi, desen kitaplığında bir örnek var, onu kullanabilirsiniz, onun bir versiyonu da var, burada hatalar olduğuna inanıyorum. Tek bir bağlantı atlama örneğimiz de var ve bunu da kullanabilirsiniz. Yani burada birkaç farklı örneğimiz var. Ancak bunlar, atlama bağlantılarını kullanabileceğiniz yaygın yolların örnekleridir. Ve öncelikle, bunun sonucunda bir sistem teknolojisi kullandıklarında sistemde gezinmek için yalnızca klavyelerini kullanan kişiler için faydalıdırlar.

Aaron Pearlman: Ancak bazen, atlama bağlantısının potansiyel olarak faydalı olabileceği başka durumlar da olabilir. Potansiyel olarak faydalı olabileceğini gördüm. Sitenizin büyük çalışma alanının bir grup arama sonucu olduğu ve aşağı kaydıracağınız ve ardından daha fazla sonuç yükleyip aşağıya kaydıracağınız tembel bir puan aldığı bir örnek hayal edebilirsiniz. Daha fazla sonuç yükleyecek, en alta kaydıracaksınız ve daha fazla sonuç yükleyecektir.

Aaron Pearlman: Peki, alt bilgiye nasıl ulaşırsınız? Ve aslında bu sorunu daha önce de yaşadım, arama motorlarına gittim ve alt bilgiye asla ulaşamadım. Ve ne güzel olurdu, aslında altbilgiye geçmeme izin veren atlama bağlantısı, çünkü altbilgide bilgi arıyordum. Dolayısıyla, bağlantıları atlamanın bunun için faydalı olabileceği yollar var. Bu sorunu çözmenin tek yolu bu değil. Elbette, sabit tuşları veya kısayol menülerini de kullanabilirsiniz. Bu hedeflere ulaşmak için pek çok farklı teknik var, ancak bu, [duyulmuyor 00:14:13]'te çok iyi olma eğiliminde olan bağlantıları atlayan tekniktir. Bir atlama bağlantısı tasarlarken akılda tutulması gereken bazı şeyler, genellikle web sitenizin web uygulamanızdaki ilk sekme durağı olacağıdır.

Aaron Pearlman: Ve genellikle orada bulunur ve bu yüzden çığlık atıyorsam veya yalnızca klavye kullanıcısıysam, hemen ulaşabilirim. Girdiğimde yapabileceğim ilk şey bu. Yani, sık kullandığım bir web uygulamasıysa, yapmaya çalıştığım şeye hemen gelebiliyorum. Ayrıca bilgide olması gereken yerde görsel olarak tasvir edilmelidir, temel olarak AI'da, böylece atlama linklerini ve uygulamanızın diğer kısımlarını da koyabilirsiniz, eğer istersem buraya bir tane koyabilirim, uzun bir tane bulabilirim. yığın sitesi kaydırma ve bunu yapmak istedim ve bir şey içinde bir atlama bağlantısına sahip olmak istedim. Bunun gibi farklı şeylere demir atabileceğinizden oldukça eminim, ancak uygulamanın içinde olması gerektiği yerde görsel olarak temsil edilmelidir.

Aaron Pearlman: Genel olarak, bu son derece nadirdir. Çoğu atlama bağlantısı her zaman ilk sekme duraklarındadır. Genel olarak, bunu yapma. Bence teknik olarak yapabilirsin ama yapma derim. Ve son olarak, bu etkileşimli bir öğedir ve geçmiş renk kontrastıdır, bu yüzden olduğundan emin olun, eğer bir görüntü veya onun içinde bir şey gibi kullanmaya karar verirseniz, yapardım, ama yapsaydınız, olması gerekirdi. onunla birlikte uygun erişilebilir ad. Genel olarak, çoğu insan metinleri ve bağlantıları kullanır, bu nedenle bağlantı olarak işaretlenecektir. Sadece renk kontrastını geçtiğinden emin olun, böylece [duyulmuyor 00:16:07]. Çok iyi. Yani, atlama bağlantıları için sahip olduğumuz tek şey bu.

Aaron Pearlman: Bu, her yerde gördüğünüz oldukça kısa ama çok yaygın bir kalıptır ve oldukça ekleyebileceğiniz bir şeydir, web uygulamanıza eklemek oldukça basittir, ancak klavyesini veya klavyesini kullanan kişiler için büyük bir fark yaratabilir. sistem teknolojisi. Öyleyse devam edeyim ve bunu kapatalım ve modal optimizasyonlara geçelim. Bunu yapmayı seçtik çünkü modlar çoğu web uygulaması arasında çok, çok, çok, çok yaygındır ve birçok farklı forumda, modların şekillendirilmesi ve oluşturulmasında birçok farklı yolla gelirler.

Aaron Pearlman: Ancak, yalnızca klavye ve Yardımcı Teknoloji kullanıcıları için daha iyi bir deneyim haline getirmek için yapabileceğimiz bazı optimizasyonlar olana kadar, düzeltebileceğimiz şeylerin çoğunda ortaya çıktığını gördüğüm bazı yaygın şeyler. Ve genel olarak, modunuz çok daha iyi. Burada çok hızlı bir şekilde göstereceğimi düşündüğüm bir şey var ki, bir Modal'ın yapması gereken önemli şeylerden biri de odağı içine hapsetmesi gerektiğidir. Bir örnek göstermek istedim … tam burada. Bu arada top sürmeyi seviyorum, bu yüzden bu onlara karşı bir kazı değil. Bu muhtemelen burada sadece küçük bir gözden kaçma. Onları her zaman keyifli bir site olarak kullandım ve üzerinde harika şeyler var.

Aaron Pearlman: Yani, girişe basacak olsaydım, kusura bakmayın, kayıt olun. İşte burada bir modal ve bazen olabilecek bir şey. Dikkatli fark ettiyseniz tab, tab, tab, tab, tab'a basıyorum. Ekranın arkasında görebileceğiniz gibi, görmek biraz zor. Odaklanmanın Modal'ın içinde tam olarak hapsolmadığını görebilirsiniz ve bu bazen olabilir. Bu nedenle, Yardımcı teknoloji veya Yalnızca Klavye kullanan bir kullanıcı olsaydım, buna geri dönmek benim için çok zor olurdu.

Aaron Pearlman: Bu çok, çok, çok, çok sık olan bir şey ve Modal'a farklı ilginç şeyler eklediğinizde kesinlikle olabilir. Bu yüzden emin olmak istediğimiz bir şey var ve bunu gündeme getirmemin nedeni, aslında çok, çok önemli olan neden, bir kip çağrıldığında, onu çağrıştıran bireye kendisini bir şekilde duyurması gerekiyor, ne var biliyor musunuz? temelde yeni açıldılar, ama aslında doğru şeyi açtılar.

Aaron Pearlman: Ve böylece, kendini duyurabilmesinin yolu şudur, kipin gövdesinin odaklanması gerekir ya da potansiyel olarak kipin başlığı odaklanabilir, böylece kipi çağrıştıran bireye, kipi çağrıştırdığını söyleyebiliriz. olan bitendir. Yani sesleri varsa, örneğin üzerinde VoiceOver kullanıyorlarsa, bu onlara neye baktıklarını söyleyecektir. Bu yüzden, vücudun odaklanabileceği bir kaç örnek vereceğimi düşündüm ve sonra modelin bunun yerine başlığa nasıl odaklanabileceğine ve sonra bununla ne yapabileceğimize dair bir örnek vereceğim.

Aaron Pearlman: Bunu gerçekten hızlı bir şekilde burada açacağım. Çok iyi. Ve bunun için sahip oldukları mod, sanırım burası bir giyim sitesi. Olan şu ki, vücuda odaklandı ve bunu en iyi şu şekilde gösterebilirim... VoiceOver'ı gerçekten hızlı bir şekilde açacağım. yukarı çekeceğim.

VoiceOver: Chrome'da VoiceOver.] Bonobolar, [duyulmuyor 00:20:10]-

Aaron Pearlman: Ve bunu duyamayacaksın-

VoiceOver: Google Chrome, [email protected]

Aaron Pearlman: Ama onu görebileceksiniz.

VoiceOver: Kartı kapatın, kartınız boş, grubun klavye odağı var. Şu anda kartınızı açarken gruptasınız, kartınızı kapatın, kartınız boş gruptur. Şu anda web içeriğinin içindeki gruptasınız, VoiceOver kapalı.

Aaron Pearlman: Yani tam orada odaklandığımda, kartınızda olan her şeyin bir kısmını okudu ve o noktada satın alma odaklandığı için kartınız kapalı ve kartınız boş. Ve bu tamamen geçerli. Bu, modlarınızı odaklamanın tamamen geçerli bir yolu. Hiç sorun değil. Ve oradan, içindeki her şey arasında sekme döngüsü yapabilirsiniz. Bir kip çağrıldığında başka bir yaygın yol, başlığa odaklanmaktır.

Aaron Pearlman: Uygulamalarımız için kullandığımız kiplerde yaptığımız şey, başlığa odaklanmaktır. Bu yüzden kipi çağrıştıracağım ve tam burada gördüğünüz gibi, odak tam burada kipli form dediği yerde, odak tam orada başlıkta. Aslında bunu bir indeks gibi belirtmek yerine programlı olarak buna odaklanıyoruz. Ve ben burada dolaşırken programlı olarak odaklanmamızın nedeni, şimdi kapat düğmesine, ayrıca başlıkta, sonra ilk etkileşimli öğeye, yani alan, sonraki alana, sonraki alana, sonraki alanlar, kaydetmeye tekrar sekme, iptal için tekrar sekme.

Aaron Pearlman: Ve buradan sekmeye bastığımda, bu başlık bir sekme durağı olsaydı, oraya giderdi ama biz bunu yapmamayı seçtik. Bunun yerine, kapanışa gidiyoruz ve bunu yapmamızın nedeni, yazılanların bir kısmını görmüş olabileceğiniz gibi biri Seslendirme kullanıyorsa ve aynı anda kulaklarıma giriyorsa, aslında biraz fazlaydı. Dikkat dağıtıyor çünkü çok hızlı konuşuyor, biraz geveze. Ve buradaki deneyim için yapmak istediğimiz optimizasyonlardan biri, biraz daha az gevezelik yapmaktı. Yani evet, duyuruyoruz, öyle, oraya ilk geldiklerinde programlı olarak modal formlara odaklanıyoruz, böylece uyandırdıkları modun aslında şu anda odaklandıkları şey olduğunu bilmelerini sağlıyor.

Aaron Pearlman: Ama bu vardiyalardan geçerek bu moddan geçeceklerse, bunu tekrar tekrar duyurmamıza gerek yok. Bu nedenle, yalnızca belirtilen fare kullanıcılarınızın çoğu için tamamen görünmez olabilecek küçük bir optimizasyon. Ancak bu küçük optimizasyon, formları sık sık doldurmak için modları çok kullandığımı ve optimizasyonun zamanla artacağı Yalnızca Klavye veya Yardımcı Teknolojiyi kullanan bir kullanıcı olduğumu hayal edebilirsiniz. Bu nedenle, küçük ufacık kullanıcı, tasarımlarımıza gösterebileceğimiz özende genel olarak önemli bir fark yaratabilecek, yapabileceğimiz şeyleri deneyimler, böylece sağlayabileceğimiz en sık deneyim olurlar.

Aaron Pearlman: Odaklanmayı ele almaktan bahsetmişken, gireceğimiz son konu odağın kendisini ele almaktır. Ve bunun bir örneğini gördük, belirli kullanım türlerinde odak kaybolabilirse ne olabilir? Ancak, önemli bir sorun olabilecek bir şey olmaktan ziyade, odaklanmayı ele alma şekliniz, bir bireyin sahip olacağı deneyimi önemli ölçüde değiştirebilir. Odaklanmayı ele almanın gerçekten kuralı, özellikle şu anda inceleyeceğimiz iki örnekle, yani çalışma alanınıza veya üzerinde çalıştığınız her şeye öğeleri kaldırmak ve eklemek… Kesinlikle birinin çalışma şeklini değiştirebilir. onunla etkileşime girer. Ve bu yüzden, Yalnızca Fare kullanıcısı veya gören bir kullanıcı, yalnızca Fare kullanıcısı olan biri için yaşayacağınız beklenen deneyimi izlemesini sağlamak istiyoruz.

Aaron Pearlman: Bu örnekte şuna bakacağız… çünkü burada bakacağız… Pekala, biraz uzatayım. Bir saniye bekle. Bunu geçici olarak buradan çıkarmak zorunda kalacağım. Oraya gidiyoruz. Yani benim tasarladığım bir model örneğini görmemelisiniz, bu aslında tek bir modal, elimizde iki tür görüntü var ve sadece bir tanesi gerçekten yapmak yerine orada ekranın altında olanı gösteriyor. , gerçekten yanlış ya da aşağıda ne olduğunu görebilmeniz için böldüm. Ve sağ tarafta, bakarsanız, şu anda odaklanmakta olan bir çöp tenekesi simgesi var. Ve bu çöp kutusu simgesine tıkladığımızda, “Silmek istediğinden emin misin?” Diyen bir diyalog olmadığını varsayarak.

Aaron Pearlman: Durumun böyle olmadığını varsayalım. O zaman asıl soru şu, oraya odaklanınca ne oluyor? Çünkü o çöp kutusu simgesine basıldığında veya seçildiğinde, tam burada bulunan talimatları kaldıracak ve aynı zamanda kendini de kaldıracaktır. Peki odak nereye gidiyor? Bu yüzden tasarımcılar olarak bizler, odağın nereye gideceğini seçmek istiyoruz çünkü aksi takdirde, bir web uygulaması içinde bir web uygulaması yapıyorsanız, odak için seçecek olan tarayıcılar gider ve tarayıcının odağın nereye gideceğini seçmesini istemiyoruz çünkü bu, vücuda bir şeyler atma eğilimindedir. Yani bu durumda, gerçekten odaklanmak istediğimiz yer, odağın bir sonraki odaklanılabilir öğeye gitmesini istiyoruz, ille de … bunun yerine talimatları kendisine odaklarız.

Aaron Pearlman: Ve bunu yapmak istememizin nedeni, birinin klavyesini kullanarak yanlışlıkla vurduğunu ve yalnızca geri tuşuna bastığını ve sonra tekrar geri tuşuna bastığını hayal edebilirsiniz. Bir yerine iki talimat setini silmiş olurdu. Ve biz, bu şeyleri fiziksel olarak birbirinden uzak tutarak, yalnızca bir fare kullanıcısı için bunu önlemek isteriz. Ancak bunu da önleyebilmek istiyoruz çünkü odak, bunu aşmak için kullandıkları şeydir. Bu yüzden, buradaki tüm bölümdeki son öğeyi silerken ne yaptığımıza dair başka bir örnek göstereyim dedim.

Aaron Pearlman: Şimdi elimizde pişirme talimatları var, birinci talimat için son talimat, odak burada nereye gidiyor? Şimdi bu özel için, bir öncekinin ne olduğuyla aynı şeyi takip edecek, ki bu aslında bir sonraki odak noktasına gidecek ama tekrar doldurulacak, ki bu, atmak istemememizle aynı sebepten dolayı bir bileşendir. tekrar çöp kutusuna atar çünkü o zaman biri tekrar seç tuşuna basarsa veya tekrar geri dönerse, biz… İstemedikleri, istemedikleri iki şeyi yanlışlıkla silerler.

Aaron Pearlman: Aynı nedenden dolayı, bunu buradaki bağlantılardan birine atmak istemeyiz çünkü yanlışlıkla bir şeyler ekleyecekleri yerde tam tersi bir problemimiz olurdu. Ve mutlaka gövdeye gitmesini istemiyoruz, çünkü gövdeye gidiyoruz ve Voice Over kullanıcınız, Asistan Teknoloji kullanıcınız, tekrar modal hakkında gevezelik etmeye başlayacak veya etkileşime devam etmenize izin vermek yerine ve niyetin ne ise onu yap.

Aaron Pearlman: Ve son olarak, burada sahip olduğum son örnek, bu durumda son öğeyi kaldıracağımız zaman ne yapacağız, buradaki modalde, hiçbir şey kalmadı. Nereye gönderecektim? Ve bu kesinlikle nereye gitmesi gerektiği tasarımcıların takdirine kalmış. Hayır, onu kıyafetlere göndermeyi ya da belki de iptale odaklamaya göndermeyi seçerseniz erişilemez olmayacak. Mutlaka erişilemez kılmaz, sadece bu, gerçekten ne beklersiniz? Hangi bilgileri iletmek istersiniz? O kullanıcıya hangi anlatıyı iletmek istiyorsunuz ve onu nereye göndermeyi seçiyoruz, onu başlığa geri göndermeyi seçtiğimizde, kullanıcıya hala modda olduklarını, hala orada olduklarını, bizde yok' t üzerlerine kapattı, örneğin orada.

Aaron Pearlman: Ve bu aslında programlı bir değişim çünkü dediğim gibi, korkunç bir ses değil. Böyle korkunç odaklanabilir bir unsur değil. Bu nedenle, bu özel örnekte odağı programlı olarak buna kaydırıyoruz. Bunlar, öğeleri kaldırırken odaklanarak ne yapılması gerektiğine dair bazı güzel örnekler. Ben de düşündüm ki… Bir öğe eklerken ne yaptığınızın bir örneğini gösterirdim. Bu yüzden, odak tutma için çok hızlı bir örneğim var.

Aaron Pearlman: Ve tam burada, buna bir tane daha ekleyeceğiz … sadece buraya odaklanabilir, başka bir bileşen ekleyebilir ve odaklanabilirsiniz, sonra bu durumda asıl bileşene geçer, iki nedenden dolayı eklediğiniz alan, bir, çünkü varsayım, onunla etkileşime geçmek istediğimiz bir sonraki alanı ekleyerek ve Yalnızca Fare kullanıcısı olsaydım beklenen davranış olurdu, muhtemelen onu gerçekten metin yazmaya başlayabilmem için eklerdim.

Aaron Pearlman: Ve yine, tekrar geri dönerlerse, bir yerine iki malzeme eklemek istemememizle aynı nedenle başka bir bileşene odaklanmaya devam etmek istemeyiz. Önceki örneğin tam tersi problem olmalıdır. Ve sonuncusu, göstermek istediğim son örnek, çünkü göstermenin faydalı olabileceğini düşünüyorum… aslında o örnek bende var, birazdan anlatabilirim. Ama bunu çok güzel anlatabilirim, oldukça yerinde bir şekilde, varsa bir modal çağrıştırdığında ne yaparsın? Örneğin, bir şey kaydettiniz, modal kayboluyor, odak şimdi nereye gidiyor ve ne yapmaya meyilliyiz, ancak bu konudaki temel kural, onu herhangi bir öğeye geri göndermek istemenizdir [duyulmuyor 00:31:03] alır.

Aaron Pearlman: Yani, küçük bir düzenleme kaleminiz olduğunu hayal ederseniz ve onu seçerseniz, kipi açarsanız, o kipi doldurursanız, kaydet'e basarsanız, odağı geri gönderme eğiliminde olan etkileşimli öğeye geri göndermek istersiniz. … ya da yaparız. Başka bir yere göndermek istediğiniz durumlar olabilir. Bu bir sihirbazsa ve ondan sonra başka bir yere giderse, yine tasarımcının takdirine bağlı olarak, bize nereye gideceğimizi anlatmaya çalıştığınız anlatıya. Ama bir tanesine benzeyen şeyler için… az önce tarif ettiğim durum, ki bu çok yaygın. Bir kip çağrıştırırsınız ya da onunla bir şey yaparsınız ve bunun sonucunda o kovulur ve bağlam mutlaka değişmez.

Aaron Pearlman: Ve o odağı olduğu yere geri göndermek istemezsiniz. Ve bunu yapmanın nedeni, Yalnızca Klavye veya Yardımcı Teknoloji kullanıcısının bulundukları yerden devam edebilmesidir. Çünkü onların o uzayda olduklarını ve bu uzayın nasıl geçtikleri konusunda ve özellikle de her şeyi geçmek için kasabayı kullandığınızda biraz doğrusal olduğunu unutmayın. Yani, sanırım yaklaşık 40 dakikaya geldik, sahip olduğum tüm örnekler ve şeyler için tam zamanındayız. Bu yüzden onu Scott'a geri vereceğim.

Scott: Teşekkürler Aaron. Bu oldukça harikaydı ve hem katılımcıdan hem de bireysel olarak seyahat ettiği için bugün gelemeyen birkaç sorumuz var. Web seminerlerimizin düzenli bir katılımcısı olan Poan, "Öğeleri kaldırırken, eylemi kabul etmemiz ve odağı oraya kaydırmamız ve ardından bir sonraki öğeye geçmemiz gerekmez mi?" diye soruyor.

Aaron Pearlman: Bir öğeyi çıkarırken, bir … tost gibi bir bildirimden mi bahsediyorsunuz yoksa neler olup bittiğini size bildiren canlı bir bölgenizin olması gerektiğini mi söylüyorsunuz? Bir öğeyi kaldırmak için odağı değiştiriyorsanız, örneğin o belirli durumda az önce gösterdiğim gibi, söz konusu silmenin çağrılması, aslında silindiklerini bilmelerini sağlamak için yeterli olmalıdır.

Aaron Pearlman: Gitmiş olmalı. Ayrıca, Seslendirme kullanıyorlarsa, bunu da alacaktır. Bir şeyle etkileşime giriyorsanız ve başka bir yerde değişiklik yapıyorsa, örneğin, sizin bir şey yaptığınız gibi ve daha sonra örneğin bir yerde bazı metrikleri değiştirdiyse, muhtemelen onlara izin vermek için kibarca bir şeyler yapan canlı bir bölge kullanmak isteyeceksiniz. bilin ki bu oldu. Bu, özellikle çalıştığınız yerin kapsamı dışında kalan bir şey. Umarım bu sorunuza cevap verir. Biraz daha teknik bir şeye dalmak olabilir. Derin teknik uygulama konularına gireceksek, bazılarını biraz daha takip etmem gerekebilir.

Scott: Mükemmel.

Aaron Pearlman: Benim geliştiricim, bu yüzden sizi oraya yönlendirmezler, ancak genel olarak durum böyledir. Gösterdiğim örnek yeterli olmalıdır. Silme olduğu için olmasını istiyorsanız, bir uyarı attığınız ve “Bunu silmesini istediğinizden emin misiniz?” Dediğiniz bir ara bölüm olabilir. Hangi durumda olduğunu daha da pekiştiriyorsun.

Scott: Harika. Yani, evet, soruları kullanıcı deneyimi odaklı tutmaya çalışın. Kullanıcı deneyimi açısından, bildirim mesajlarına odaklanmayı nasıl yönetirsiniz?

Aaron Pearlman: Bir bildirime odaklanılsın mı? Görmek istersen sana bir tane gösterebilirim.

Scott: Tabii.

Aaron Pearlman: Rastgele geri alabiliriz çünkü bildirimler olan kadehlerimiz var. Bu yüzden burada tost açacağım. Yani bu aslında şu anda odaklanılıyor. This toast is evoked and it is being focused right now and you can actually, as you can see, you can tab into the clause right here. So, it depends. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Ana içeriğe geç.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: Yaptığımız şeylerden biri de tasarımlarıma oldukça yoğun açıklamalar eklemek. Belirli şeylerin nasıl olması gerektiği boyutundan, neye benzemesi ve nasıl hissettirmesi gerektiğine ilişkin Hex kodlarına veya RGBA değerlerine kadar her şey. Ancak, buna ekleyebileceğiniz erişilebilirlik ek açıklamaları da vardır.

Aaron Pearlman: Ve sonra sadece iletişim kurun, yapılar geçerken gözden geçirin, herhangi bir özel odaklama yaptıysanız, bu özel odakların harika göründüğünden emin olun, renk kontrastını kontrol edin, geldiğinden emin olun, yazı tipinin olduğundan emin olun. Sahip olduğunuz seçenekler arasında, ağırlıkları daha yüksek ve daha büyük olan bazı yazı tipleri vardır. Renk kontrastları 4,5 olmak zorunda değil. Aslında biraz daha düşük olabilir, ancak sadece bu şeylere göz kulak olmak isteyeceksiniz. Tıpkı deneyim konularına da göz kulak olacağın gibi. Dikkat ettiğiniz ve tasarımlarınızda not aldığınız şeylere göz kulak olmak isteyeceksiniz.

Scott: Yani burada birkaç dakikamız kaldı. Bu yüzden bir soru daha soracağım. Bazı insanlar erişilebilirliğin tasarım süreci boyunca yaratıcılığı engelleyebileceğini düşünüyor. Bu karşılaştığın bir şey mi? Yaratıcılığın erişilebilir tasarıma nasıl uyduğunu düşünüyorsunuz?

Aaron Pearlman: Elbette. Erişilebilir bir şekilde tasarlamak zorunda olduğum için ilk tepkilerimden biri buydu, birinin bana kelepçeleri takması ve "İçinde çalışabilmen gereken çok daha küçük bir kutu var" demesiydi. Erişilebilir bir şekilde tasarlamanın daha fazla zorluğun olabileceği anlamına geldiği doğrudur, çünkü uymanız gereken daha fazla kural vardır. Ama sonunda, deneyimin daha iyi olduğunu gördüm ve olmadı… Bu yanlış adlandırmayı ortadan kaldırdıktan ve WCAG 2.0 AA erişilebilir olan daha erişilebilir tasarımlar yapmaya başladığımda, hemen hemen her şeyi yapabileceğimi fark ettim. ki yapmak istedim.

Aaron Pearlman: Bazen sorunları daha önce yaptığımdan biraz farklı bir şekilde ifade etmem veya çözmem gerekir. Sanırım birçok insan erişilebilir tasarım yapmayı düşündüklerinde… Size çok özel bir örnek vereceğim. Erişilebilirliği tasarlamayı düşündüklerinde, "Ah, peki, örneğin tüm bu süslü görselleştirmeleri yapamam. Bunların hepsini yapamam çünkü erişilebilir olmayacaklar, çünkü eğer bir kişi onları göremiyorsa, ben bunu yapamam.”

Aaron Pearlman: Sadece basit bir görselleştirme tasarlıyordum, sadece bir çeşit çizgi grafiği ve bunların altında bir çizgi grafiği vardı, x ekseninde bence zaman vardı ve y ekseninde kullanım veya buna benzer bir şey vardı. o. Ve ondan aşağı doğru inen bu güzel küçük eğim vardı ve ayları ve zamanı tasvir etmek için arkasından giden bu hafif çizgiler vardı. Konunun uzmanlarından biriyle bunu erişilebilir kılmak hakkında konuştuğumda, onun sadece "Hayır" gibi olacağından emindim. Ama gerçekten güzel görünen bu grafiği erişilebilir kılmak için yapmam gereken birkaç şey olduğunu söyledi. Birincisi, en üstteki çizginin renk kontrastını geçmesi gerekiyor çünkü aslında trendin bilgisini zaman içinde ileten şey bu.

Aaron Pearlman: Altındaki dereceli malzeme sadece dekorasyon ve bunun ve y ve x ekseni çizgilerinin renk kontrastının geçişini kesintiye uğratmadığı ve sonunda tamam olduğu sürece. Arkasındaki çizgiler iyiydi, ama sonunda bunu belirtmek için altına onay işaretleri ekledim. Ve sonra, üzerine gelip odaklandığımda, çünkü bazen üzerine gelebilirsiniz ve çizgi grafiğin bir kısmına bir nokta ekler, sadece noktanın kendisinin renk geçmesini sağlar. zıtlık. Bunu, başka bir noktayla beyaz bir nokta koyduğunuz ya da dış tarafında da büyük bir vuruş gibi olduğunu söylemeliyim, bir çeşit çörek yaparak yaptım.

Aaron Pearlman: Ardından, solmuş çizgileri geri getirecek biraz tedavi ekledim. Ve hepsi renk kontrastını geçti ve sonunda iyi oldu. Geçenler gerçekten güzel görselleştirmelerdi. Şimdi kabul edildi, erişilebilir adların tümüne girmiyorum ve bunu yapamıyorum. Pek çok kütüphane bununla ilgili. Bunu bir kenara bırakın, en azından kontrast diyoruz çünkü birçok tasarımcının mücadele ettiğini düşünüyorum. Bunu yapabilirsin.

Aaron Pearlman: Bu sadece bu tür şeyler hakkında gerçekten dikkatli olmakla ilgili ve daha fazla örnek almak ve sadece farklı şeyler denemek ve denemek ve bu fikirleri birlikte sunabileceğiniz ve onları ileri geri zıplatabileceğiniz ve tekrar kontrol edebileceğiniz başka insanlara sahip olmak, gerçekten gerçekten yap bunu. Gerçekten hiçbir şeyi engellediğini düşünmüyorum. Bu sadece, bunu nasıl yapacağınız konusunda biraz daha net düşünmenizi ve bir kişinin görme bozukluğu varsa veya yapamıyorsa bununla nasıl meşgul olduğuna dair merceğin içinden baktığınızdan emin olmanızı sağlar. Bir medya uygulaması oluşturuyorsanız, onu hiç görmüyor veya duymuyorsunuz.

Scott: Bir soru daha, ama bence buna değinmeliydik. Erişilebilirlik hakkında düşünmeye sürecinizin hangi aşamasında başlıyorsunuz? Tüm süreç boyunca varsayacağım.

Aaron Pearlman: Evet, tüm süreç boyunca. Ben biraz daha fazlası olacağım… Bunu kime söylediğimi biliyorum ve kulağa biraz küstahça geliyor. Bu nedenle, düşük doğruluklu prototipleme gibi şeyler yaparken erkenden, sekme sırası gibi şeyler hakkında düşüneceksiniz. Belki başlıklar ve yapı, bunun gibi şeyler hakkında düşüneceksin. Bunlar, düşündüğünüz erişilebilirlik türü şeylerdir. Daha sonra, aslına uygunluğu yükseldikçe, renkler ve seçtiğiniz paletleriniz, belki erişilebilir isimler, buna değer olabilecek herhangi bir şey için alternatif metin gibi şeyler hakkında düşüneceksiniz, düşünüyor olabilirsiniz, örneğin herhangi bir özel odaklama yapıyorsanız, muhtemelen bunun hakkında düşünmeye başlayacaksınız.

Aaron Pearlman: Bu, düşük sadakat yaparken bunu düşünemeyeceğiniz anlamına gelmez, sadece genel olarak anlamına gelir, benim sürecimden geçtiğimde bu şeyler bu kategorilere girme eğilimindedir. Her zaman erişilebilirliği düşünüyorsunuz, ancak daha düşük kaliteli işlerde olduğunuz için her zaman onunla her şeyi düşünmüyorsunuz ve fikir yürütüyorsunuz ve sadece fikirler hakkında düşünüyorsunuz ve sadece Fikirler üzerinde çalışırken, erişilebilirliğe daha fazla uyum sağladıkça bu yaratıcı şeylerin geçmesine izin verin, bir nevi içsel olarak yoluna girecek ve daha az bilinçli bir şey olacaktır.

Scott: Evet. Yeterince adil. Bu notta, zamanımız tükendi, Aaron. Zaman ayırdığınız için çok teşekkür ederim ve—

Aaron Pearlman: Bu harikaydı. Harika zaman geçirdim.

Scott: Sanırım önümüzdeki birkaç Smashing konferansında olacaksınız.

Aaron Pearlman: New York'ta olacağım. New York'ta olacağım.

Scott: Tamam. Ve orada bir atölye mi yapıyorsunuz?

Aaron Pearlman: Evet, öyleyiz.

Scott: Tamam. Mükemmel. Vakit ayırdığınız için tekrar teşekkür ederim ve hala izleyen üyeleri görmemize izin vermek için önümüzdeki hafta iki web seminerimiz var. Birincisi Kristina Podnar ile Dijital İnsanların Gücü. Ve sonra, Ernest Journal'dan ilham alan üç numaralı Inspired Designs Decisions, Andrew Clarke ile serimizde üç numara var. Bugün katıldığınız için herkese çok teşekkür ederim. Ve yine, bu kayıt, biz düzenlemeyi bitirdikten sonra gönderilecek üyelik panelinde mevcut olacak ve önümüzdeki hafta hepinizi görmeyi umuyoruz. Bu yüzden tekrar teşekkürler Erin.

Bu Bir Sargı!

Sürekli ve nazik destekleri için Smashing Üyelerine yürekten teşekkür ediyoruz - ve gelecekte daha fazla web seminerine ev sahipliği yapmak için sabırsızlanıyoruz.

Aaron'ı yaklaşmakta olan SmashingConf New York'ta (15-16 Ekim) ağırlamaktan daha mutlu olamazdık - sizi de orada görmek isteriz!

Lütfen bu röportaj dizisini faydalı bulursanız ve kimlerle röportaj yapmamızı istediğinizi veya hangi konuları ele almamızı istediğinizi bize bildirin, biz de hemen konuya girelim.