Erişilebilir Ön Uç Bileşenleri İçin Eksiksiz Bir Kılavuz

İçindekiler

Aşağıda, erişilebilir tüm bileşenlerin alfabetik bir listesini bulacaksınız. İçindekileri atlayın veya tek tek keşfetmek için aşağı kaydırın.

• :odak stilleri
• otomatik tamamlama
• düğmeler
• kartlar
• atlıkarınca
• "kapat" düğmeleri
• içerik kaydırıcıları
• onay kutuları
• renk sistemleri
• renk paletleri
• çizgi roman
• bileşen kitaplıkları
• çerez onay istemleri
• geçerli sayfada gezinme
• karanlık mod
• veri çizelgeleri
• veri görselleştirmeleri
• tarih seçiciler
• devre dışı bırakılmış düğmeler
• bölücüler
• form stilleri
• dipnotlar
• içeriği gizleme
• simge bağlantıları
• girdiler
• klavye gezintisi
• bağlantılar
• medya kaydırıcıları
• kipler
• navigasyon menüsü
• şifre alanları
• tercih-azaltılmış-*
• radyo düğmeleri
• iskeletler
• "atla" bağlantıları
• SVG'ler
• sekmeler
• tablolar
• test yapmak
• üçüncü taraf bileşen erişilebilirliği
• Geçiş anahtarları
• araçlar
• araç ipuçları
• video/ses oynatıcılar

Erişilebilir :focus Stilleri

Her tarayıcının varsayılan odak stilleri vardır, ancak kutunun dışında, çok erişilebilir değildirler. :focus amacı, kullanıcıya belgede tam olarak nerede oldukları konusunda rehberlik etmek ve içinde gezinmelerine yardımcı olmaktır. Bunu başarmak için, çok ince veya hiç görünmeyen bir odaktan kaçınmamız gerekir. Aslında, klavye kullanıcıları için herhangi bir görünür odak göstergesini ortadan kaldırdığı için anahattı kaldırmak kötü bir fikirdir. Odak ne kadar belirgin olursa o kadar iyidir.

Daha iyi tasarlamanın yolları vardır :focus stilleri. Tips For Focus Styles adlı makalesinde Nic Chan, odak stillerinin daha iyi satın alınabilirlik ve biraz dolgu, ofset ve uygun ana hatlarla nasıl iyileştirileceğine dair birkaç yararlı ipucunun altını çiziyor. :focus stilleriyle daha fazla eğlenceye mi ihtiyacınız var? Lari Maza da senin arkanda.

Ayrıca, odaklanmış bir öğenin ana öğesini stillendirmek için :focus-within focus-in'i ve tasarımınızda herhangi bir soruna neden olursa, bir fare/işaretçi ile etkileşim kurarken odak stillerini göstermemek için :focus-visible kullanabiliriz.

Hidde de Vries'in belirttiği gibi, :focus-visible : ile ilgili erişilebilirlik endişelerini göz önünde bulundurmak önemlidir, odak stillerine güvenen tüm insanlar klavye kullanmaz ve odak stillerini yalnızca klavye yapmak fare kullanıcıları için de bir maliyeti ortadan kaldırır, çünkü odak da odak bir şeyin etkileşimli olduğunu belirtir (bahşiş için Jason Webb'e teşekkürler!) .

Son olarak, en son Chrome, Edge ve diğer Chromium tabanlı tarayıcıların, kullanıcı bir düğmeye tıkladığında veya bir düğmeye dokunduğunda bir odak göstergesi ( odak halkası ) görüntülemeyi bıraktığını belirtmekte fayda var (bahşiş için Kim Johannesen'e teşekkürler!) .

Erişilebilir Otomatik Tamamlama

İster bir harita, ister bir veri görselleştirme veya yalnızca kasadaki bir ülke seçici olsun, daha büyük bir veri kümesiyle uğraşmak zorunda kaldığınızda, otomatik tamamlama müşterinin girdisini büyük ölçüde artırabilir. Ancak, girdiye yardımcı olduğu gibi, seçenekleri ve seçimi ekran okuyucu kullanıcılarına duyurmada da yardımcı olması gerekir.

İngiltere'de Devlet Dijital Hizmetinin arkasındaki ekip olan Gov.uk, WAI-ARIA en iyi uygulamalarını izleyen bir JavaScript bileşeni olan açık kaynaklı erişilebilir-otomatik tamamlamaya (diğer birçok şeyin yanı sıra) sahiptir. Önerileri ne zaman görüntülemeye başlayacağınızı seçebilir ve menünün kesinlikle konumlandırılmış bir kaplama olarak görüntülenmesine veya varsayılan olarak ilk önerinin seçilmesine izin verebilirsiniz. Ekip ayrıca bir düzine erişilebilir otomatik tamamlama örneği ve uygulaması içeren bir demo sayfası sağlar.

Erişilebilir Düğmeler ve Simge Bağlantıları

Görsel olarak metin içermeyen, ancak yalnızca bir simgeden oluşan bir bağlantıya veya düğmeye sahip olmak nadir değildir - örneğin, kompakt bir gezinme çubuğu veya sosyal simgeler. Ancak bu tür simge bağlantılarının tamamen erişilebilir olduğundan nasıl emin olabilirsiniz? Görünüşe göre, sanıldığı kadar basit değil.

Kitty Giraudel, nasıl daha iyi yapabileceğimizi göstermek için bu soruna “Erişilebilir Simge Bağlantıları” başlıklı bir makale ayırdı. Noktayı göstermek için ikonik Twitter kuşlu bir SVG'den oluşan bir simge bağlantısı kullanırlar ve adım adım nasıl erişilebilir hale getirileceğini gösterirler: görsel olarak gizlenmiş açıklayıcı bir metinle, ardından aria-hidden ile erişilebilirlik ağacından SVG işaretlemesini kaldırarak aria-hidden , ve son olarak, focusable özniteliği ekleyerek svg öğelerinin Internet Explorer'a odaklanabileceği gerçeğini düzeltir. Makalenin sonunda Kitty, tüm bunların nasıl küçük bir React bileşenine dönüştürüleceğini de gösteriyor.

Birçok kullanıcı için büyük fark yaratacak küçük bir detay.

Erişilebilir Simge Düğmeleri Oluşturma ve Inclusively Hidden'da Sara Soueidan ve Scott O'Hara, simge düğmelerinin tüm ince inceliklerine ve ayrıntılarına girerek, onu çalıştırmak için bir dizi tekniği araştırıyorlar. Sara ve Scott, erişilebilir görsel olarak gizlenmiş metin için uygun bir tekniğin kullanılmasını önererek bir dizi tekniği keşfederler - görsel olarak gizlenecek ancak ekran okuyucuların erişebileceği metin. Bu, .sr-only yardımcı programı sınıfıyla veya hidden ve aria-labelledby veya yalnızca aria-label ile yapılabilir. Sara, doğrudan düğmenin üzerinde bir etiket sağlayabildiğimde, düğme için bir etiket sağlamak üzere SVG simgesinin kendisini kullanmanızı önermez.

Ancak genel olarak, kullanıcı etkileşimi için hangi öğenin kullanılacağı konusunda hala biraz kafa karışıklığı var: bağlantıları ne zaman ve düğmeleri ne zaman kullanıyoruz? Marcy Sutton, Modern Uygulamalarda Bağlantılar ve Düğmeler hakkında ayrıntılı bir yazı yazmıştır. Bir bağlantı ile ziyaretçi yeni bir kaynağa gider ve onları mevcut bağlamdan uzaklaştırır. Ancak bir düğme, arayüzde bir değişiklik yapılmasını ister.

Marcy, tek sayfalı uygulamalarda hem bağlantılar hem de düğmeler için kullanım durumlarını özetliyor ve bir düğmenin kalıcı bir pencere açmak, bir açılır pencereyi tetiklemek, bir arabirimi değiştirmek veya medya içeriğini oynatmak için mükemmel bir öğe olduğunu gösteriyor. Vadim Makeev'in “Düğme Ne Zaman Düğme Değildir?” başlıklı makalesine de göz atabilirsiniz.

Erişilebilir Engelli Düğmeleri

Müşteri tüm verileri doğru bir şekilde sağlayana kadar "Devam" düğmesinin devre dışı bırakılması uzun web formlarında oldukça yaygın hale geldi. Bu davranış, formda bir sorun olduğunun göstergesi olarak işlev görür ve girdi gözden geçirilmeden tamamlanamaz. Bu, her giriş alanı için satır içi doğrulama iyi çalışıyorsa ve sorunlu veya hatalı olduğunda hiç çalışmıyorsa işe yarar.

“Devre Dışı Düğmeler Suck”ta Hampus Sethfors, devre dışı bırakılan düğmelerin olumsuz yanlarını vurgular. Onlar yerindeyken, bir şeylerin yanlış olduğunu iletiriz, ancak neyin yanlış olduğunu veya nasıl düzeltileceğini gerçekten açıklamayız. Bu nedenle, müşteri bir hata mesajını gözden kaçırdıysa - ister masaüstünde uzun bir biçimde, ister mobilde kısa bir biçimde olsun, kaybolacaktır. Birçok yönden düğmeleri aktif tutmak ve hataları iletmek daha verimlidir.

Ve mümkün değilse, en azından “Formu dolduramıyorum, lütfen yardım edin” butonuyla bir çıkış yolu sağlayın, böylece müşteri hizmetleri, sorun yaşamaları durumunda müşterilere geri dönebilir. Web formları hakkında daha ayrıntılı bir tazelemeye ihtiyacınız varsa, “Birden Sıfıra Form Tasarımı” sizi meşgul edecektir.

Sandrina Pereira, CSS-Tricks hakkındaki makalesinde, <button disabled> kullanmanın yaygın yolunun yalnızca tıklamayı değil aynı zamanda odağı da engellediği sorununu araştırıyor. Bu zararsız gibi görünse de ekran okuyucu kullanıcıları için kafa karışıklığına neden olur. Önerisi: Devre dışı bırakılmış ile aria-disabled disabled geçiş yapmak, deneyimi daha keyifli hale getirir, çünkü düğmeye hala odakla erişilebilir ve devre dışı olarak işaretlenmiş olsa da bir araç ipucunu da tetikleyebilir.

Erişilebilir Kartlar

Kartlar birçok avantaj sunar. Mobil cihazlarda iyi çalışırlar, geniş tıklama alanları sağlarlar ve hem yatay hem de dikey olarak istiflenebilmeleri, birçok yerleşim kararlarını kolaylaştırır. Ancak, izlenecek erişilebilirlik standardı, <card> öğesi veya ARIA tasarım modeli yoktur. Bunun yerine, karşılaşabileceğiniz olası erişilebilirlik engelleri, kartın amacına ve içeriğine bağlıdır. Heydon Pickering, kapsayıcı bileşenler koleksiyonunda basit bir kart bileşeninin birkaç permütasyonuna ve sağlam HTML yapısı ile ergonomik etkileşim arasındaki dengenin nasıl korunacağına bakıyor.

Adrian Roseli ayrıca, kartların kolayca ana erişilebilirlik tuzaklarına dönüşebilecek bir yönünü ele alan harika bir makale de yazdı: büyük tıklama alanları. Bir kullanıcı gezinmek için bir ekran okuyucu kullandığında, son derece ayrıntılı kontroller yapabilirler; Ses kullanıcıları için harekete geçirici mesajı seçmek için ne söylenmesi gerektiği kafa karıştırıcı olabilir. Adrian, küçük bir planlamanın bu sorunu nasıl çözebileceğini gösteriyor.

Nomensa ekibinden erişilebilir kart bileşenlerine ilişkin bir başka derin inceleme daha geliyor: Blog gönderilerinde, kartlarla ilgili yaygın sorunlara göz atıyorlar ve bağlantıları engelliyorlar ve geliştirmek için içeriği yeniden düzenleyerek kartlarınızı daha erişilebilir hale getirmek için değerli ipuçları paylaşıyorlar. örneğin semantik.

Erişilebilir Karuseller ve İçerik Kaydırıcıları

Erişilebilir bir atlıkarınca kulağa biraz oksimoron gibi geliyor - işlevselliği sağlayan çok sayıda komut dosyası varken, bunlardan yalnızca birkaçına erişilebilir. Şimdi, elbette, erişilebilir menzil kaydırıcıları var, ancak karuseller biraz farklı bir bileşen. Alison Walden'ın “Bir atlıkarınca kullanmanız gerekiyorsa, erişilebilir hale getirin” başlıklı makalesinde de belirttiği gibi, gören kişi atlıkarıncayı kullanmaya hiç zorlanmaz, ancak klavye kullanıcıları atlıkarınca içinde gezinmek zorunda kalır. En azından klavye odağında gizli bir "atlama" bağlantısı görünebilir. Ayrıca, kişi tüm panel setleri arasında gezindikten sonra, odak, atlıkarıncayı takip eden bir sonraki etkileşimli öğeye geçmelidir.

Heydon Pickering, slaytları birlikte gruplamak, önceki ve sonraki düğmeleri, yakalama noktalarını dahil etmek ve odaktan kaldırılan görünmez bağlantılı öğeleri kullanmak için liste işaretlemeyi kullanmayı önerir. Makale ayrıca IntersectionObserver kullanan bir kod örneği sağlar, bu nedenle bunun için bir çoklu doldurmaya ihtiyacınız olabilir.

Erişilebilir Kapat Düğmeleri

"Kapat" düğmeleri her yerdedir - modlarda, reklamlarda, onay mesajlarında, çerez istemlerinde ve arayüzünüzde görünecek tüm bindirmelerde. Ne yazık ki, işlevsellik genellikle fare kullanıcıları ile sınırlıdır ve ekran okuyucu kullanıcıları ve klavye kullanıcılarını dışarıda bırakır. Düzeltebiliriz.

“Erişilebilir Kapatma Düğmeleri”nde Manuel Matuzovic, erişilemeyen kapatma düğmelerinin 11 örneğini ve düzenini ve oldukça iyi çalışan 5 kapatma düğmesi örneğini vurgulayarak derin ayrıntılara giriyor. Sorunu çözmenin en kolay yolu, görünür metin ve yalnızca görsel olarak erişilebilir simge içeren bir düğme sağlamak ve ekran okuyucular tarafından yapılan açıklamanın, simgenin açıklaması tarafından kirletilmemesini sağlamaktır. Manuel ayrıca, işinize hemen uygulayabileceğiniz 5 kapat butonunun kod örneklerini de sağlar.

Erişilebilir Onay Kutuları ve Radyo Düğmeleri

Sorun değil: çoğu tarayıcıda en azından benzer görünmelerini sağlamak için onay kutularını ve radyo düğmelerini nasıl biçimlendiririz - aynı zamanda erişilebilir olmalarını sağlarken? Sara Soueidan makalesinde istenen sonucu elde etmek için akılda tutulması gereken birkaç tekniği ele alıyor.

Sara, öğeleri gizlemek için farklı teknikleri, her birinin içeriğin erişilebilirliğini nasıl etkilediğini ve görsel olarak nasıl gizleneceğini ele alır, böylece daha stil sahibi bir alternatifle değiştirilebilirler: SVG.

Etkileşimli bir öğeyi gizlerken, onu ekran okuyucu tarafından erişilebilir tutan bir gizleme tekniği seçtiğimizden emin olmalıyız, onu görsel olarak yerini alan her şeyin üstüne yerleştirmeliyiz, böylece dokunarak gezinen bir kullanıcı onu beklediği yerde bulabilir, ve sonra şeffaf hale getirin. Sara ayrıca, daha fazla okumak için makalelere faydalı referansların yanı sıra hemen kullanabileceğimiz canlı demolar da sağlar.

Erişilebilir Renk Sistemleri

Renk kontrastını doğru ayarlamak, yalnızca görme engelli kişilerin ürününüzü değil, aynı zamanda düşük ışıklı ortamlarda veya eski ekranları kullanırken diğer herkesin ürününüzü kolayca kullanabilmesini sağlamanın önemli bir parçasıdır. Ancak, kendiniz erişilebilir bir renk sistemi yaratmayı denediyseniz, muhtemelen bunun oldukça zor olabileceğini biliyorsunuzdur.

Stripe ekibi kısa süre önce bu zorluğun üstesinden gelmeye ve mevcut renk sistemlerini yeniden tasarlamaya karar verdi. Kullanıma hazır olması gereken faydalar: erişilebilirlik yönergelerini geçmek, kullanıcıların birbirinden kolayca ayırt edebilecekleri net ve canlı tonlar kullanmak ve bir rengin diğerine göre öncelikli gibi görünmeden tutarlı bir görsel ağırlığa sahip olması. Yaklaşımları hakkında daha fazla bilgi edinmek istiyorsanız, erişilebilir renk sistemleriyle ilgili blog gönderileri size değerli bilgiler verecektir.

Erişilebilir Renk Paletleri

Bir rengin mükemmel tonunu veya tonunu bulmak sadece bir zevk meselesi değil, aynı zamanda erişilebilirlik meselesidir. Sonuçta, renk kontrastı yoksa, bir ürün en kötü durumda görme bozukluğu olan kişiler için bile kullanılamaz hale gelebilir. WCAG 2.0 düzeyi AA, normal metin için en az 4,5:1 ve büyük metin için 3:1 kontrast oranı gerektirir ve WCAG 2.1, grafikler ve UI bileşenleri için (form girişi gibi) en az 3:1 kontrast oranı gerektirir. sınırlar). AAA, normal metin için en az 7:1 ve büyük metin için 4,5:1 kontrast oranı gerektirir. Gianluca Gini: Geenes'ten potansiyel tuzakları önceden tespit etmenize yardımcı olacak çok ayrıntılı bir kontrast denetleyicisi geliyor.

Araç, ton aralıkları ve doygunluk ile uğraşmanıza ve renk paletlerini seçilebilir üç UI maketinden birine uygulamanıza olanak tanır. Bir kez uygulandıktan sonra, etkilenen insanların renkleri nasıl gördüğünü görmek için farklı türde görme bozukluklarını tetikleyebilir ve son olarak paletiniz için en iyi tonlar konusunda bilinçli bir karar verebilirsiniz. Renkleri hemen kullanmak için kodlarını kopyalayıp yapıştırmanız veya Sketch'e aktarmanız yeterlidir. Ayrıca DevTools'ta görme eksikliklerini de taklit edebilirsiniz.

Görme Bozukluklarını Anlamak

Muhtemelen daha önce protanopi, döteranopi veya glokom duymuşsunuzdur. Fakat bunun gibi görme engelli insanlar renk kombinasyonlarınızı nasıl görüyor? Corey Ginnivan'ın Who Can Use aracı sizin için simüle eder.

Bir arka plan ve bir metin rengi girin ve araç, sizin için WCAG derecelendirmesinin yanı sıra kontrast oranını hesaplar. Bu oldukça soyut sayıları insancıllaştırmak için, Kim Kullanabilir , farklı görüş türlerinin bir listesini, bunlardan kaç kişinin etkilendiğini ve elbette her tür için renk kombinasyonunuzun simülasyonunu gösterir. Rengin etkisini daha iyi anlamak için harika bir yardımcı.

Erişilebilir Çizgi Romanlar

Web'de biraz daha karmaşık şekiller ve düzenler kullandığımızda, bazen onu ön plan veya arka plan görüntüsü olarak kaydetmek ve küçük ve büyük ekranlara farklı görüntüler sunmak çok daha kolay görünüyor. Bu, konuşma balonları olan eski güzel çizgi romanlar kadar karmaşık çizelgeler ve grafikler için de geçerlidir, ama ya bu deneyimi tamamen yeniden hayal edebilseydik?

Comica11y, Paul Spencer'ın her şey dahil bir çevrimiçi çizgi roman okuma deneyimi elde etmeyi amaçlayan bir deneyidir. Ya çizgi roman için farklı okuma modlarımız olsaydı, örneğin kapalı başlıklar, paneller arasında gezinmek için uygun odak yönetimi, yüksek kontrast modu, SVG renk körlüğü filtreleri, programlı baloncuklar, seçilebilir ve çevrilebilir metin, LTR ve RTL desteği ve hatta ayarlanabilir yazı tipi boyutları? UI zorluklarını ne kadar ileri götürebileceğimizi ve deneyimi büyük ölçüde geliştirmek için web'i kullanabileceğimizi gösteren harika bir girişim.

Erişilebilir Bileşen Kitaplıkları

Oluşturduğumuz bileşen kitaplıklarının çoğu, tüm olağan şüphelileri (akordeonlar, tablolar, atlıkarıncalar, açılır menüler, tipografi, renkler ve kutu gölgeleri ile birlikte) kapsamaya çalışırken, Adam Silver'ın Stilsiz Tasarım Sistemi odaklanmıştır. öncelikle erişilebilirlik ve web formları etrafında.

Form Tasarım Kalıpları hakkındaki kitabı için oluşturulmuş ve bu kitapta kullanılan bir sistem olarak Adam'ın kitaplığı, otomatik tamamlama, onay kutuları ve parola göstermeden radyolara, seçme kutularına ve adımlayıcılara kadar her şey için bir dizi erişilebilir bileşen sağlar. Çoğu, temiz, erişilebilir işaretleme ile minimal bir CSS stiline sahiptir.

Ve biraz daha gelişmiş bileşenlere ihtiyacınız varsa, Heydon Pickering'in Kapsayıcı Bileşenleri - yukarıda bazı örneklerinden bahsettik - arkanızda: erişilebilir kartlar, veri tabloları, bildirimler, kaydırıcılar, sekmeli arayüzler, araç ipuçları, menüler ve geçişler hakkında kapsamlı eğitimler.

Erişilebilir Çerez İzin İstemleri

Bindirmeler ve açılır pencereler her zaman sorunludur. Ancak, özellikle ekran okuyucu kullanıcıları için, bazen herhangi bir ayar yapmak ve hatta sitede çerez kullanımını onaylamak için bu istemlerin üstesinden gelmek inanılmaz derecede zordur. Leonie Watson, "Ekran okuyucular ve tanımlama bilgisi izinleri" konusundaki 15 dakikalık konuşmasında, uyumluluk pop-up'larının erişilebilirlik konusundaki kötü deneyimlerini açıklayarak ayrıntılara giriyor. Bazı durumlarda, kullanıcılar izin istemlerini farkında olmadan kaydırır, diğerlerinde ise istemi kabul etmek imkansız olur ve bu da siteyi hiç kullanamaz hale gelir.

Peki onları nasıl daha iyi hale getirebiliriz? Çerez afişleri ve erişilebilirlik bölümünde, Sheri Byrne-Haber, çerez istemlerinin genellikle sahip olduğu yaygın sorunları vurgular: Görsel olarak tuzaklara odaklanmak için nasıl göründüklerinden, sekme sırasındaki görünümden, kabul türü ve alternatif izin açıklama biçimleri. Quentin Bellanger, tanımlama bilgisi onay modelinin temel bir kod örneğini ve bununla birlikte bir öğretici sağlar. Ücretsiz açık kaynaklı çözümler de vardır: Osano Cookie Consent ve cookie-consent-box, ancak bazı erişilebilirlik çalışmaları gerektirebilir.

Erişilebilir Geçerli Sayfa Gezinme Durumları

Renk, anlamı aktarmanın etkili bir yoludur, ancak az gören veya renk görme yetersizliği olan kişiler için de ikinci bir görsel göstergeye sahip olmak her zaman iyi bir fikirdir. Örneğin bir simge. Callum Hart, bir kullanıcının o anda bulunduğu sayfayı belirtmek için bir renk/simge kombinasyonuna güvenir. “Erişilebilir Mevcut Sayfa Gezinme Durumu” adlı blog yazısında, bu tasarım kararının arkasındaki düşünceler hakkında değerli bilgiler paylaşıyor.

Gönderi, HTML'deki SVG simgesini satır içine almaktan ve yardımcı teknolojilerden gizlemek için aria-hidden hidden'ı kullanmaktan pikseller yerine ems kullanmaya ve ekran okuyucu kullanıcıları için aria-current özniteliği ile ek bağlam aktarmaya kadar, gönderi, nasıl yapılacağına ilişkin derinlemesine bir bakış sağlar. gerçekten erişilebilir bir navigasyon durumu sağlar.

Web'de Karanlık Mod İçin Eksiksiz Bir Kılavuz

Karanlık mod, Apple, Windows ve Google'ın işletim sistemlerine uygulanmasıyla hızla bir kullanıcı tercihi haline geliyor. Peki ya web'deki karanlık mod? Adhuham, web'de bir karanlık mod tasarımı uygulamaya yönelik farklı seçenekleri ve yaklaşımları inceleyen kapsamlı bir karanlık mod kılavuzu yazdı.

Başlangıç ​​olarak, kılavuz, temaları değiştirmek için farklı yaklaşımları ve site genelinde ve sonraki ziyaretlerde tutarlı bir şekilde uygulanmaları için bir kullanıcının tercihlerinin nasıl saklanacağını kapsayan, karanlık modu uygulamanın gerektirdiği teknik hususlara bakar. Kullanıcı aracısı stillerini color-scheme meta etiketiyle işlemeye yönelik ipuçları, olası FOIT durumlarından kaçınmaya yardımcı olur.

Elbette, karanlık moda hazır görüntüler, gölgeler, tipografi, simgeler ve renkler elde etmek için değerli ipuçları ile tasarım konuları da ele alınmaktadır. Bu sırada: moddaki yüksek kontrastı istemeden bozmadığımızdan emin olmak için Windows Yüksek Karşıtlık için Styling moduna bir göz atın ( bahşiş için teşekkürler, Courtney Heitman! ).

Erişilebilir Veri Grafikleri

Veri görselleştirmeleri, bilgileri öne çıkarmanın harika bir yoludur. Ancak, aynı zamanda kendi erişilebilirlik zorluklarıyla da gelirler. Sara Soueidan, Khan Academy'nin yıllık raporu için erişilebilir bir mikro site oluşturmak üzere SuperFriendly ile birlikte çalıştığında, bir ziyaretçinin siteyi nasıl keşfettiğinden bağımsız olarak verilerin sunulma ve uygulanma biçiminin mümkün olduğunca erişilebilir olduğundan emin olmak istedi. Çözümü: SVG.

Erişilebilir veri çizelgeleri üzerine bir vaka incelemesinde Sara, SVG çizelgelerinizi ve görselleştirmelerinizi erişilebilir kılmak istediğinizde göz önünde bulundurmanız gereken her şeyi özetledi - en önemli adım olan uygun bir yerleştirme tekniği seçmeyle başlayarak. Ayrıca, ARIA rollerini kullanarak bir SVG grafiğini erişilebilir hale getirmeye çalışmaktan neden kaçınmanız gerektiğini ve Sara'nın bunları gömmek için neden <figure> 'i seçmediğini de kapsar. Harika bir başvuru kılavuzu. Artı: özellikle grafiklerde daha kolay erişilebilir metin etiketleri de kullanabilirdik ve Sara bunları ayrı bir makalede de ele alıyor.

Erişilebilir Veri Görselleştirmeleri

Veri görselleştirmeleri, genellikle kullanıcıların harekete geçmesi gereken önemli bilgileri içerir. Bazen büyük sayıları kısa cümlelerle kullanabiliriz, ancak görselleştirmeler gelişmeleri ve büyük miktarda bilgiyi daha hızlı anlamaya yardımcı olabilir. Ancak bu, bilginin anlaşılması kolay olması gerektiği anlamına gelir ve bu, özellikle renklerin seçimine, bilginin sunulma şekline, etiketlere, açıklamaların yanı sıra desen ve şekillere atıfta bulunur. Sarah L. Fossheim, veri görselleştirmelerinde erişilebilirlikle ilgili makale dizisinde, erişilebilir veri görselleştirmeleri tasarlarken akılda tutulması gereken örnekler, yapılması ve yapılmaması gerekenlerle birlikte konuyla ilgili yararlı yönergeleri ve kaynakları vurgular.

Sarah, verileri açıklamak için renge güvenmemeyi ve genel olarak parlak ve düşük kontrastlı renklerden kaçınmayı önerir. Renge ek olarak desenler ve şekiller kullanmak faydalıdır ve anlaşılır bir dil, etiketler ve göstergeler veri görselleştirmesini net bir şekilde açıklamaya yardımcı olabilir. Her makale, daha fazla okuma için birçok örnek ve kaynakla doludur. Ayrıca kontrol etmeye değer: Sarah'nın ABD başkanlık seçimi veri görselleştirmeleri incelemesi ( bahşiş için Stephanie Eckles'a teşekkürler! ).

Erişilebilir Tarih Seçiciler

Dışarıda düzinelerce tarih seçici kitaplığı var, ancak yalnızca tarayıcılar arasında çalışan, ağır bağımlılıkları olmayan, oldukça iyi yazılmış ve tüm büyük erişilebilirlik gereksinimlerini karşılayan güvenilir işgücüne sahip olmak her zaman harikadır.

Duet Date Picker aynen böyle. Herhangi bir JavaScript çerçevesinde uygulanabilen veya hiçbir çerçeve olmadan kullanılabilen, erişilebilir, WCAG 2.1 uyumlu bir tarih seçicidir. Minimum ve maksimum izin verilen bir tarih belirlemenize izin veren yerleşik işlevsellik ile birlikte gelir ve yaklaşık 10 kb küçültülmüş ve Gzip'lenmiş (buna tüm stiller ve simgeler dahildir) ağırlığındadır.

Bir alternatife ihtiyacınız varsa, Airbnb tarafından piyasaya sürülen ve uluslararasılaştırma için optimize edilmiş, aynı zamanda erişilebilir ve mobil dostu olan bir kitaplık olan React Dates'e göz atın.

Yatay Bölücüler Şekillendirme

<hr> öğeleri genellikle oldukça sıkıcıdır. Görsel bir mola sağlayan ve içeriği bölen düz, yatay çizgiler. Ancak içeriğinize ve tasarımlarınıza hoş bir kişisel dokunuş kazandırmak için CSS ve SVG kullanılarak stillendirilebileceklerini biliyor muydunuz?

Sara Soueidan tam olarak bunu yaptı: Kişisel sitesindeki <hr> ler sıkıcı çizgiler olarak gösterilmiyor, bunun yerine bir telin üzerinde oturan kuşları göreceksiniz. Sara, <hr> lerinizi daha keyifli hale getirmenize yardımcı olmak için, bazı CSS ve SVG sihirlerinin yardımıyla yatay çizgileri nasıl şekillendirdiğini özetledi. Ayrıca, anlamsal ve erişilebilir kalırken çeşitli bağlamlara uyum sağlamaları için onları daha da geliştirmenin yollarını araştırıyor. Güzel bir küçük detay.

Erişilebilir Çapraz Tarayıcı Form Stilleri

Özel onay kutularını ve radyo düğmelerini gizlemek ve şekillendirmekle hiç uğraştınız mı? Özel seçim stilleri ne olacak? Ya da belki erişilebilir bir açılır gezinme menüsü? Her zaman aynı bileşenleri oluşturma ve yeniden oluşturma eğilimindeyiz, bu yüzden onları bir kez ve herkes için doğru yapalım.

Sarah Higley'nin “<select> your zehrini”, düzenlenebilir ve çoklu seçim varyantları, bunların karşılaştırmalı kullanılabilirliği (verilerle!) ve pratik önerilerle <select> öğesini şekillendirmenin tüm zorluklarına ve inceliklerine kapsamlı iki bölümden oluşan bir derin dalıştır. nasıl doğru yapılacağını.

Stephanie Eckles'in Eski CSS Sorunları için Modern CSS Çözümleri, pek çok zorluğu çözmek için birçok kullanışlı modern tekniği vurgular, ancak serisindeki bazı makaleler biçimlere ayrılmıştır: CSS özel onay kutuları, tarz radyo düğmeleri, belirli stiller, girdiler ve metin alanları.

Sara Soueidan, blogunda onay kutularını ve radyo düğmelerini nasıl kapsamlı bir şekilde gizleyeceğinizi ve stillendireceğinizi açıklayan ayrıntılara giriyor. Bonus: Adrian Roselli'nin kod örnekleri, az tasarlanmış geçişlere ilişkin ek bilgiler sağlar. Hemen kullanmak için harika kaynaklar ve formları erişilebilir bir şekilde şekillendirin.

İçeriği Sorumlu Bir Şekilde Gizlemek

Görünmez, ancak ekran okuyucular için erişilebilir hale getirmek için içeriği sorumlu bir şekilde nasıl gizlersiniz? Kitty Giraudel, HTML veya CSS ile bir şeyi saklamanın farklı yollarını ve hangisini ne zaman kullanacağını özetledi.

Kitty'nin önerdiği gibi, görsel içerik ile erişilebilirlik katmanına maruz kalan temel içerik arasında çok fazla tutarsızlık olmasını önlemek isteyebilirsiniz. Ne kadar çok senkronize olurlarsa o kadar iyi. Kitty, hangi tekniği ne zaman kullanacağınızı değerlendirmenize yardımcı olmak için üç farklı senaryo tanımlar: Bir şeyi hem görsel olarak hem de erişilebilirlik ağacından (örneğin, widget'ları göster/gizle, ekran dışı gezinme veya kapalı bir iletişim kutusu) gizlemeniz gerekiyorsa, display: none veya hidden HTML özniteliği. Erişilebilirlik ağacından bir şeyi gizlemeniz, ancak bunu görünür tutmanız gerekiyorsa, aria-hidden="true" kullanın (geçerli durumlar, anlamı olmayan görsel içerik, simgelerdir). Ve son olarak, bir şeyi gizlemek ama erişilebilir tutmak istiyorsanız, görsel olarak gizlenmiş CSS bildirim grubunu kullanın (örneğin, simge düğmeleri veya bağlantılar gibi daha fazla bağlam sağlayan tamamlayıcı içerik için). Harika bir genel bakış.

Erişilebilir Dipnotlar ve Yan Notlar

Özünde, dipnotlar atlama bağlantılarından çok daha fazlası değildir - bir kaynağın açıklamasına yönelik bağlantılar, belgenin altına veya kenar çubuğuna yerleştirilmiş veya satır içi görünen küçük bir akordeon. Bununla birlikte, dipnotlar atlama bağlantıları olduğundan, ekran okuyucu kullanıcılarının bağlantıların ne zaman dipnotlara referans olduğunu anlamalarını sağlamalıyız ve bunu aria-describedby niteliğiyle yapabiliriz. Her bağlantı için sayaç, bir CSS sayacı aracılığıyla uygulanacaktır. :target ile okuyucunun atladığı satırı vurgularız ve içerikteki asıl dipnot yerine geri bir geri bağlantı sağlarız.

Kitty Giraudel, erişilebilir dipnotların nasıl oluşturulacağını açıklayan ayrıntılara giriyor ve ayrıca React ile erişilebilir dipnotların nasıl oluşturulacağını kontrol edebilir ve bunları React with Eleventy'de oluşturmak için tepki-a11y-dipnotlarını kullanabilirsiniz (bahşiş için Kitty Giraudel'e teşekkürler!) .

Erişilebilir Girişler

2019'da WebAIM, en iyi bir milyon web sitesinin erişilebilirliğini şok edici bir sonuçla analiz etti: hatasız sayfaların yüzdesinin yüzde birin altında olduğu tahmin ediliyordu. Sitelerimizi yardımcı teknolojiye güvenen insanlar için kapsayıcı ve kullanılabilir hale getirmek için anlamsal HTML'nin temellerini doğru bir şekilde almamız gerekir. Küçükten başlama, paylaşma ve birlikte çalışma inancıyla Oscar Braunert'in kapsayıcı girdiler hakkındaki makalesi bunu yapmak için harika bir başlangıç ​​noktasıdır.

WAI, ARIA ve WCAG'nin temelleri ile başlayan makale, girdilerin nasıl daha erişilebilir hale getirileceğini araştırıyor. İpuçları, kullanıcı arayüzünü değiştirmeden uygulanabilir ve Oscar'ın dediği gibi: “Şüpheniz varsa, yapın. Kimse fark etmeyecek. Bazı kullanıcılarınız hariç. Ve bunun için sana teşekkür edecekler.”

Mükemmel Bağlantı

Bir bağlantı, bir bağlantıdır, değil mi? Bir bağlantıda tıklanabilir bir kelime veya resimden daha fazlası vardır. Rian Rietveld, “Mükemmel bağlantı” başlıklı makalesiyle her cihazda herkes için çalışan bir bağlantının nasıl yazılacağını, tasarlanacağını ve kodlanacağını inceliyor.

Rian, bir bağlantının yeni bir pencerede mi yoksa yeni bir sekmede mi açılması gerektiği, bağlantı metinlerinin nasıl anlaşılır hale getirileceği, bir e-posta adresine, telefon numarasına veya dosyaya bağlantıların nasıl ele alınacağı, bir resmi bir dosyaya yerleştirirken nelere dikkat etmeniz gerektiği sorusunu ele alıyor. bağlantı, ne zaman altının çizileceği ve vurgulu ve odak stillerinin yanı sıra anlamsal konular ve dahili bağlantılarla nasıl başa çıkılacağı. Konuya 360 derece bakış.

Erişilebilir Uygulama Genelinde Klavyede Gezinme

Klavye gezintisi için iyi düşünülmüş bir konsept herkese yarar sağlar: Fareyi rahatça kullanamayan kişilere olanak tanır, ekran okuyucu kullanıcılarının bir uygulamayla etkileşim kurmasına yardımcı olur ve uzman kullanıcılara mümkün olduğunca verimli çalışmak için daha fazla kısayol sağlar. Genellikle klavye desteği belirli kısayollarla sınırlıdır, ancak Discord'daki ekip, uygulamalarıyla bir adım daha ileri gitmeye ve klavye desteğini her şeye genişletmeye karar verdi.

"Discord Uygulama Genelinde Klavye Gezinmesini Nasıl Gerçekleştirdi" vaka çalışması, görevi nasıl ele aldıklarına ve bu süreçte karşılaştıkları zorluklara ilişkin değerli bilgiler paylaşıyor. Bir tanesinin özellikle zor olduğu ortaya çıktı: Sayfada odağın nerede olduğunu sürekli olarak nasıl belirtebilirim? Focus Rings için mevcut çözümler işe yaramadığından, ekip kendi çözümünü sıfırdan oluşturmak zorunda kaldı ve kodu açık kaynak yaptı. Benzer bir zorlukla karşı karşıyaysanız, bu sizin için.

Erişilebilir Dokunma/Tıklama Menüsü

Fareyle üzerine gelindiğinde açılan mega açılır menüler tasarlamak hala iyi bir fikir mi? Muhtemelen değil. Vurgulu menüler, tutarsız oldukları, kafa karıştırıcı oldukları ve elbette mobil cihazlar için alternatif bir çözüme ihtiyaç duydukları için birçok kullanılabilirlik ve erişilebilirlik sorununa sahiptir. Aslında, Mark Root-Wiley, net ve erişilebilir tıklama menüleri lehine fareyle üzerine gelinen menüleri bırakmanın zamanının geldiğini öne sürüyor.

Mark makalesinde, kullanışlı işaretçiler ve araştırmasından referanslarla birlikte erişilebilir bir tıklama menüsünün nasıl oluşturulacağına dair ince ayrıntılara giriyor. Buradaki fikir, menüyü, alt menüleri göstermek için li:hover > ul ve li:focus-within > ul inin > ul kullanan, yalnızca CSS'ye yönelik bir vurgulu menü olarak oluşturmaya başlamaktır. Ardından, <button> öğelerini oluşturmak, aria özniteliklerini ayarlamak ve olay işleyicilerini eklemek için JavaScript kullanırız. Nihai sonuç, CodePen'de bir kod örneği ve GitHub deposu olarak mevcuttur. Bu, menünüz için de iyi bir başlangıç ​​noktası olmalıdır.

Erişilebilir Medya Kaydırıcı Bileşenleri

Televizyonlarda, telefonlarda ve masaüstlerinde benzer şekilde çalışan duyarlı bir medya kaydırma bileşeni oluşturmaya ne dersiniz? Adam Argyle sizi bu süreçten adım adım geçirir.

Medya veya ürünlerin küçük resimlerini barındırmak için tasarlanan kaydırma bileşeni, erişilebilir işaretlemeye sahip bir <ul> üzerine kurulmuştur. CSS, mütevazi listeyi, görüntüleri sergileyen ve bir ızgaraya yapıştıran pürüzsüz bir kaydırma deneyimine dönüştürür. Biraz incelik eklemek için, JavaScript gezici dizin etkileşimlerini kolaylaştırır, klavye kullanıcılarının çok sayıda öğe arasında geçişi atlamalarına yardımcı olur ve son olarak, ancak en az değil, deneysel prefers-reduced-data medya sorgusu, gerekirse medya kaydırma çubuğunu hafif bir deneyime dönüştürür . Akıllı!

Erişilebilir Modeller

Sayfada basit bir modal veya bindirme olabilir, belki de müşterinin girişini onaylamak veya bir galeride birkaç fotoğraf göstermek veya sadece kullanıcının tercihlerini onaylamak için. Tüm bu durumlarda, erişilebilir bir mod oluşturmak, odak tuzağı olarak da bilinen bir maceraya dönüşecek.

Eric Bailey'nin ayrıntılı olarak açıkladığı gibi, ilk ve son odaklanılabilir öğe de dahil olmak üzere kapana kısılmış içeriğin sınırlarını belirlemeniz, ardından içinde olmayan her şeyi kaldırmanız, odağı kapana kısılmış içeriğe taşımanız, kaçan olayları dinlemeniz gerekir. sınırı, önceki durumu geri yükleyin ve odağı, yakalanan içeriği tetikleyen etkileşimli öğeye geri taşıyın.

İdeal olarak, HTML'deki dialog öğesi kadar basit bir şey kullanırdık, ancak ne yazık ki büyük erişilebilirlik sorunları var. Shadow DOM ile odağı yönetmek de kolay değil. Etkileşimli öğelerin keşfedilme ve odaklanma yeteneğini kaldırmak ve ardından geri yüklemek için inert özniteliği kullanabiliriz. Daha eski tarayıcılar için, Google Chrome ve WICG'den inert çoklu dolgular kullanabiliriz.

• Scott O'Hara'nın erişilebilir-modal-penceresi, tamamen erişilebilir güvenilir bir komut dosyasıdır.
• Kitty Giraudel kısa süre sonra odağı yakalayan ve geri yükleyen, aria–* niteliklerini değiştiren ve bindirme tıklaması ve Escape'te diyaloğu kapatan hafif (1,6 KB) bir betik olan a11y-dialog Next'i piyasaya sürecek. Hala uygulama desteğinden yoksun olan ve kalıcı erişilebilirlik sorunları olan <dialog> 'a dayandığından, bu sürümü önceki sürümle (6.1.0) karıştırmamak önemlidir.
• Bağımlılık içermeyen basit, erişilebilir, açık kaynaklı bir görüntü ışık kutusu olan Parvus'a bakabilirsiniz. Tipik bir senaryoda, resmin daha büyük versiyonuna bağlı bir resmimiz olurdu. Parvus ile, bir görüntünün etrafındaki bağlantıya bir sınıf .lightbox eklemek yeterlidir ve komut dosyası sizin için geri kalan her şeyi otomatik olarak yapar.

Erişilebilir Şifre Alanları

“Şifreyi göster” ve şifre ipuçları, form alanlarını daha kullanışlı hale getirir. Kullanıcıların şifrelerini yanlış yazıp yazmadıklarını ve yeni bir tane oluştururken hangi kalıbın kabul edilebilir olduğunu anlamalarına yardımcı olurlar. Ancak, ortaya çıktığı gibi, bu şeylere gelince erişilebilirlik genellikle eksiktir.

Durumu iyileştirmenize yardımcı olmak için Nicolas Steenhout, parola erişilebilirliğini göster/gizle ve parola ipuçlarının herkes için yararlı olduğundan nasıl emin olunacağını daha yakından inceliyor. switch ve aria-live ve aria-pressed rolüyle göster/gizle düğmelerini geliştirmekten otomatik tamamlamayı desteklemeye kadar, Nicolas bu konuda web'i biraz daha erişilebilir kılmak için bilmeniz gereken her şeyi özetledi.

Tercihler prefers-reduced-* ile Kullanıcı Tercihlerini Destekleyin

Her kullanıcı aynı değildir ve bazı kullanıcılar animasyonları severken, diğerlerinin hareketle ilgili tıbbi sorunları olabilir. prefers-reduced-motion ortam sorgusu, animasyonları açıp kapatmanıza olanak tanır, ancak bir kullanıcının tercihine bağlı olarak animasyonları yönetmek için daha da fazla çözüm vardır. Elijah Manor blog yazısında @media, matchMedia ve CSS, SVG SMIL ve JavaScript animasyonlarına yönelik özel bir React kancası gibi farklı teknikleri ele alıyor.

İçeriğinizi herkes için erişilebilir hale getirmek söz konusu olduğunda, henüz tarayıcılar tarafından desteklenmese de (ancak bunu Polypane ve Chromium tarayıcılarda taklit edebilirsiniz) bilmeye değer başka bir prefers-reduced-data edilen prefers-reduced-* medya sorgusu vardır: tercihler prefers-reduced-data . Bir kullanıcının ne zaman mümkün olduğunca az veri kullanmak istediğini - örneğin bağlantılarının yavaş olup olmadığını veya verilerin sınırlı olup olmadığını gösterir.

• Tatiana Mac, animasyona özel tüm stilleri animasyona özel bir stil sayfasına yerleştirmeyi ve yalnızca ziyaretçi "Hareketi azalt" seçeneğini belirtmemişse sunmayı öneren, animasyonlara önce hareketsiz bir yaklaşım benimseme konusunda çok kapsamlı bir yazı yazdı.
• Kitty Giraudel, bir bankacılık kullanıcı arabirimi örneğinde ve bir kod örneğinde azaltılmış hareket modunun uygulanmasına ilişkin yönergeler sağlar.
• Polypane ekibi, sitenizi bugünden geleceğe hazırlamak için medya sorgusu hakkında bilmeniz gerekenleri özetledi.

Erişilebilir İskeletler

İskelet kalıpları, kendilerini ekran okuyucularına sunmanın anlamlı bir yolundan yoksun olma eğilimindedir. Bir pencere öğesi yüklenirken genellikle aria-busy="true" kullanırlar, ancak yalnızca birkaç ekran okuyucu bu özelliği gerçekten dikkate alır. Peki daha iyi nasıl yapılır?

Adrian Roseli'nin önerdiği gibi, aria-busy="true" ile herhangi bir düğümü bulmak için CSS'yi kullanabilir ve ekran okuyucu ve ekran okuyucu olmayan kullanıcılar için aynı etkiyi elde etmek için onu display: none olarak ayarlayabilirsiniz. “Daha Erişilebilir İskeletler” adlı makalesinde, sizi süreci adım adım yönlendiriyor. Demo, JAWS, NVDA, VoiceOver ve TalkBack'in güncel sürümleriyle tarayıcılarda çalışır.

Erişilebilir “Atla” Bağlantıları

Özellikle çok fazla navigasyonun olduğu sayfalarda, bölümler arasında veya sayfa etrafında hareket etmek sinir bozucu ve can sıkıcı olabilir. "Atla" bağlantılarının çok yardımcı olabileceği yer burasıdır. Ne yazık ki, "Atla" bağlantılarının uygulandığını, ancak display: none ile gizlendiğini ve bu nedenle kimse tarafından kullanılamayacağını (ekran okuyucu kullanıcıları ve klavye kullanıcıları dahil) görmek nadir değildir.

“İçeriği Atla” Bağlantısı Nasıl Oluşturulur'da Paul Ryan, erişilebilir bir içerik atlama bağlantısının nasıl uygulanacağı konusunda adım adım bir eğitim sunar. Temel olarak, atlama bağlantısını ekrandan çıkarmak için CSS dönüşümünü kullanırız, ancak :focus üzerinde tekrar ekrana getiririz. Makaleye yapılan yorumlarda, Eric Bailey ayrıca, çok sayıda etkileşimli öğe içeren içerik bölümlerinden veya gezinmesi zor olabilecek öğelerden (içindekiler tablosu ve iframe s gibi) önce atlama bağlantıları sağlayabileceğimizi fark etti.

Erişilebilir SVG'ler

SVG'lerden bahsetmek: Bugün SVG'lerle yapabileceklerimiz, geçmiş yılların temel biçimlerinin çok ötesine geçiyor. Sadece SVG simgelerini tarif etmekle kalmıyor, aynı zamanda onları stillendirip canlandırabiliyoruz. Gerçek kapsayıcılık kalıpların ötesindeyse - erişilebilir SVG'leri tasarlarken ve geliştirirken başka hangi faktörleri dikkate almalıyız?

Carie Fisher'ın Erişilebilir SVG'ler: Modellerin Ötesinde Kapsayıcılık başlıklı makalesinde yanıtladığı soru tam olarak bu. Makalede Carie, SVG renk ve kontrastı, açık ve koyu modları, SVG animasyonu, azaltılmış hareket ve erişilebilirliğe odaklanan birçok araca daha yakından bakıyor. Makalelerde ayrıca ayrıntılı açıklamalar ve daha fazla okuma için işaretçiler ile birlikte demolar ve kod örnekleri bulacaksınız.

Ve sadece SVG'lerle ilgili değil, erişilebilir bileşenlerin karmaşık dünyasına daha derinden dalmak isterseniz, Carie'nin erişilebilir kod kalıpları hakkındaki makalesini yayınladık.

Erişilebilir Sekmeler

Arayüzünüz sekme panelleri kullanıyor olabilir, ancak bu sekmelerin içeriğini klavye kullanıcıları ve ekran okuyucu kullanıcıları için erişilebilir kılmak için, görsel tasarımın ve ARIA semantiğinin çok dikkatli ve bilinçli bir şekilde açıklanmasına ihtiyacımız var. Sekmeli Arayüzlerde Heydon Pickering, klavye davranışına ve odak yönetimine saygı gösterecek doğru çözümü bulmaya çalışırken ayrıntılara giriyor. Bölümleri kademeli olarak sekme panellerine dönüştürmeyi önerir (kod örneği) (bahşiş için Daniela Kubesch'e teşekkürler!).

Adam Silver'ın belirttiği gibi, daha az bilgili ekran okuyucu kullanıcıları sekmeler arasında geçiş yapmak için ok tuşlarını kullanmayı bilmiyor olabilir. Geliştiricilerin klavye aracılığıyla çalışma şeklini değiştirmek için çok az müdahale ile tüm sekmeleri normal sekme sırasında odaklanabilir hale getirmek için bir argüman var.

Alternatif olarak, TabPanelWidget, sekmeler için duyarlı ve erişilebilir bir çözümdür. Düz eski semantik HTML'ye dayanır ve sekmeler tam olarak sığmadığında bir akordeon haline gelir ( ResizeObserver sayesinde ancak henüz onu desteklemeyen tarayıcılar için bir çoklu dolgu var).

Komut dosyası yalnızca anlamsal ve erişilebilir bir çözüm değil, aynı zamanda web için Tabpanel ve akordeon widget'ları oluşturmanıza yardımcı olacak duyarlı ve çok yönlü bir çözümdür. Klavye dostudur ve Vanilla JS kitaplığı olarak (veya Vue, React ve Angular için bir widget olarak) mevcuttur.

Erişilebilir Masalar

Tablolarla ilgili pek çok erişilebilirlik sorunu vardır, ancak en büyük zorluk, görsel bir temsili, herhangi bir önemli bilgiyi atlamadan, bir ekran okuyucu tarafından anlamlı bir şekilde yüksek sesle okunacak doğrusal bir seriye dönüştürmektir. Neyse ki Adrian Roseli, erişilebilir tabloların zorluklarını ve çözümlerini keşfetmek için çok zaman harcıyor.

Erişilebilir tablolar hakkındaki gönderisinde Adrian, yalnızca klavye kullanan bir kullanıcının kapsayıcıya sekme yapabilmesini sağlamak için tabloyu role="region" , aria-labelledby ve tabindex="0" ile bir <div> içine sarmayı önerir. tablo, ekran okuyucularına düzgün bir şekilde duyurulduğundan emin olmak için odak ve tablo içinde <caption> alır. Adrian ayrıca duyarlı bir tablonun yanı sıra genişletilebilir satırlar, sıralanabilir tablo ve sabit tablo başlıkları içeren tablolar için bir kod örneği sağlar.

Ekran Okuyucular Veri Tablolarında Nasıl Gezinir?

Hiç ekran okuyuculu bir tabloda gezinmeyi denediniz mi? Değilse, Leonie Watson'ın ekran okuyucuların veri tablolarında nasıl gezindiğiyle ilgili makalesine göz atmalısınız. Değerli içgörüleri paylaşır ve herkes tarafından kullanılabilecek hayal kırıklığı yaratmayan tablolar oluşturmak için neyin önemli olduğunu gösterir.

Yayında Leonie, bir tabloya geçmek, içeriğinde gezinmek ve belirli bilgileri bulmak için NVDA'yı kullanıyor. Uygun HTML öğeleri (veya ARIA rolleri) ona tablonun özellikleri hakkında bilgi verir ve özellikle tablonun içeriğinde gezinmek için klavye komutlarına erişmesini sağlar.

İlginç bir paket servis: Klavye odağı ve ekran okuyucu odağı aynı şey değildir. Duymuş olabileceğinizin aksine, navigasyona yardımcı olması için bir tablonun her hücresini bir klavye ile odaklanabilir hale getirmeniz gerekmez. Hücrenin içindeki içerik etkileşimli değilse, klavye kullanıcılarının tabloda gezinmek için amaçladığınızdan çok daha fazla çalışmasına neden olursunuz. Ayrıca Leonie ile Bir Ekran Okuyucu Kullanıcısının Web'e Nasıl Eriştiği (73 dakika) konulu Smashing TV videosunu da izleyebilirsiniz.

Erişilebilir Geçiş Anahtarları

Formlarımız müşterilerimize açık/kapalı, karanlık/ışık modu vb. ikili bir seçim sunduğunda, bir geçiş anahtarı kullanabiliriz. Anahtarın birkaç amaca hizmet etmesi gerekiyor: mevcut seçimi net bir şekilde açıklaması gerekiyor (ve bu o kadar da sık değil!), iki seçeneğin olduğunu açıklaması gerekiyor ve müşterilerin anlayabileceği kadar açık olması gerekiyor. aralarında nasıl geçiş yapılacağını anlayın. Sara Soueidan bir geçiş anahtarının nasıl oluşturulacağını araştırırken, elbette erişilebilir bir geçiş anahtarının nasıl oluşturulacağını araştırmak için oldukça zaman harcadı.

Sara'nın çözümü, her biri kendi etiketine sahip, yardımcı teknolojilere birkaç ayrı seçenek olarak duyurulan, klavye aracılığıyla erişilebilen ve çalışması için ek ARIA veya JS gereksinimleri olmayan iki radyo düğmesi kullanır. Sonuç, bir tema değiştirme geçiş kodu örneğidir ve ayrıca Scott O'Hara'nın kod örneğine de göz atabilirsiniz.

Sara'nın radyo düğmesi geçiş anahtarına iki etiketi nedeniyle erişilebilir olduğunu unutmamak önemlidir. Bu nedenle, bir geçiş anahtarının iki etiketi yoksa , bu kullanılacak bir model olmayacaktır. Scott'ın deposunda geçiş anahtarları için işaretleme kalıpları bulabilirsiniz. ( bahşiş için Scott O'Hara'ya teşekkürler! ).

Kitty Giraudel, kendi rahatınız için ince ayar yapabileceğiniz erişilebilir bir geçişin küçük bir HTML ve CSS uygulaması için bir öğretici de paylaşıyor. Erişilebilir geçişin temeli, uygun şekilde etiketlenmiş bir onay kutusudur. Durumunu hem ikonografi hem de renk ile iletir ve CSS etkin değilse herhangi bir artifakt bırakmaz. Geçiş, özelleştirilebilen yerel odak stilleri, devre dışı bırakılmış bir durum ile birlikte gelir ve gerekirse sağdan sola yönlendirmeyi de destekler.

Erişilebilir Araç İpuçları ve Geçiş İpuçları

Simge düğmeleriyle yakından ilişkili bir bileşen, bir ipucudur. Kelimenin tam anlamıyla "araçlar için ipuçları", aksi takdirde yanlış anlaşılabilecek bir kontrolün veya görselin amacını açıklayan küçük bilgi parçalarıdır. Bir kasada neden belirli bir kişisel bilgiye ihtiyacımız olduğunu açıklamak istediğimizde, muhtemelen burada eski güzel bir araç ipucunu kullanacağız. Peki, onları nasıl doğru hale getireceğiz?

Heydon Pickering'in Kapsamlı Araç İpuçları ve Geçiş İpuçları, erişilebilir bir araç ipucu oluşturmak için gereken hemen hemen her şeye çok kapsamlı bir genel bakış sağlar. Bu, ipucu içeriğinin etiket mi yoksa açıklama olarak mı sağlanacağına karar vermek ve buna göre ARIA özelliklerini seçmek, title niteliklerine güvenmemek ve araç ipuçlarına kapat ve onay düğmeleri veya bağlantıları gibi etkileşimli içerik koymaktan kaçınmak anlamına gelir.

• Sara Soueidan, elbette, tam olarak erişilebilir bir yardım ipucu oluşturmanın ince inceliklerine de giriyor ve JavaScript'in tamamen erişilebilir etkileşimli bileşenler oluşturmak için zorunlu olduğu sonucuna varıyor.
• Sarah Higley ayrıca araç ipuçlarının karmaşıklığını açıklıyor ve eylem halindeki güvenilir bir model gösteren bir kod örneği yayınladı.
• Scott O'Hara'nın araç ipuçlarıyla ilgili bir GitHub deposu var,
• Adrian Roseli, devre dışı bırakılmış araç ipuçları ve RTL yönü içeren demolar da dahil olmak üzere, geçişler için çok sayıda kod örneği sağlar.

Erişilebilir Video/Ses Oynatıcılar

Bugünlerde kısa bir klip veya uzun bir film izlerken izleyicilerin sık sık altyazı kullandığını görmek alışılmadık bir durum değil. Videoyu gürültülü bir ortamda izliyor olabiliriz ya da belki yazılı dili daha iyi anlayabiliriz ya da belki şu anda başka bir şeyle meşgulüz ve kulaklıklara başvurmadan hızlıca bir şeye bakmamız gerekiyor. Bunun ötesinde, bir duraklama istemek için klavyenin <space> tuşunu veya ileri geri hareket etmek için tuş oklarını ne sıklıkla kullanıyoruz? Yine de birçok video oynatıcı ve özel çözüm, bu işlevi kutudan çıktığı gibi sağlamaz.

Erişilebilir HTML5 Medya Oynatıcıları, erişilebilir ses ve video oynatıcılara genel bir bakış sağlar. Çok sayıda harika açık kaynak seçeneği var, örneğin AblePlayer güvenilir olanlardan biri gibi görünüyor. Klavyeyle erişilebilen, ekran okuyucu kullanıcıları için düzgün şekilde etiketlenmiş ve konuşma tanıma kullanıcıları tarafından kontrol edilebilen eksiksiz bir oynatıcı kontrolleri seti içerir, yüksek kontrasta sahiptir, kapalı açıklamalı alt yazıları ve alt yazıları destekler, bölümler, metne dayalı sesli açıklama, etkileşimli döküm özelliği ve otomatik metin vurgulama. YouTube ve Vimeo videolarını destekler. Hower, jQuery'ye bağlıdır.

Alternatif olarak, Vime.js'ye de bakabilirsiniz: tamamen açık kaynaklı, hafif, tamamen özelleştirilebilir ve üçüncü taraf bağımlılıkları olmadan . Plyr ve Accessible HTML5 Video Player by PayPal gibi diğer harika seçenekler de benzerdir. İkincisine yalnızca klavye kullanıcıları ve ekran okuyucu kullanıcıları tarafından tamamen erişilebilir, vanilya JavaScript ile yazılmıştır, ayrıca bir React bileşeni olarak sağlanır ve JavaScript kullanılamıyorsa tarayıcının yerel kontrollerine geri döner ( ipucu için teşekkürler, @jamsandwich ! ).

Ekran Okuyucu Kullanıcılarını Sinirlendiren Web Sitesi Özellikleri

Eksik bir alt yazı, otomatik olarak oynatılan bir video, etiketlenmemiş düğmeler, başlıkların kötü kullanımı, erişilemeyen web formları - gören kullanıcılar için küçük bir sorun gibi görünen şeyler, bir web sitesini bağımsız olarak kullanabilme ile görme engelliler için kullanma arasındaki farkı yaratabilir. görme engelli insanlar. Holly Tuke bunu kendi deneyimlerinden biliyor.

Holly, yaygın erişilebilirlik sorunlarına yönelik farkındalığı artırmak için her gün bir ekran okuyucu kullanıcısı olarak karşılaştığı beş can sıkıcı web sitesi özelliğini ve elbette bunların nasıl düzeltileceğini özetledi. Chris Ashton ayrıca, ekran okuyucu kullanıcılarının sahip olduğu ve yalnızca semantik ve klavye erişilebilirliğine odaklanan konuşmalarda genellikle ihmal edilen ortak sorunları açıklayan bir makale yayınladı. Büyük bir fark yaratan küçük ayrıntılar ( bahşiş için Alex Chudesnov'a teşekkürler! ).

Ama Önce Erişilebilirlik Desteği

Yardımcı teknolojilerin tarayıcılar ve kodla etkileşime girmesinin birçok farklı yolu vardır. Ekran okuyucuları ve ses kontrol yazılımlarını tam otomatik hale getirmek hala mümkün olmadığı için manuel testler yapmak zorunda kalıyoruz. İşte burada a11ysupport.io devreye giriyor.

Başlangıçta Michael Fairchild tarafından oluşturulan bu topluluk odaklı web sitesi, geliştiricilere erişilebilirliğin nelerin desteklendiği konusunda bilgi vermesini amaçlamaktadır. Bu aktif bir projedir ve katkılara her zaman açığız, bu yüzden test etmeye başlayın. Ayrıca, temel semantikleri, rolleri ve ortak bileşenler ve modeller için gerekli ARIA'yı tanımlayan WAI-ARIA yazma uygulamalarını her zaman kontrol etmeye değer (bahşiş için Stephanie Eckles'a teşekkürler!) .

Erişilebilirlik Kaynakları ve Kontrol Listeleri

Erişilebilirlik inanılmaz derecede önemlidir, ancak ne yazık ki çoğu zaman gözden kaçar. Topluluk odaklı A11Y Projesi, tasarımcılara ve geliştiricilere güzel, erişilebilir ve kapsayıcı deneyimler oluşturmak için ihtiyaç duydukları bilgi birikimini sağlayarak dijital erişilebilirliği kolaylaştırmaya çalışır.

Erişilebilir tasarımın arkasındaki temel ilkelerden erişilebilirlik denetimi yürütmeye ve topluluk oluşturmaya kadar, A11Y Projesi konuya 360 derecelik bir bakış açısı getiriyor. Hızlı ipuçları, okunacak kitaplarla ilgili ipuçları, takip edilecek haber bültenleri gibi makalelerin yanı sıra kullanışlı araçlar, erişilebilirliğe adanmış gruplar ve çok daha fazlasını bulacaksınız.

Erişilebilirlik Araçları Deposu

Bir projeyi göndermeden önce bir şeyi unutmanın o kaşıntı hissini hiç yaşadınız mı? Kontrol listelerinin, son hesaplaşmadan önce yapılması ve halledilmesi gereken şeylere genel bir bakış sağlamanın anahtarı olduğu bilinmektedir. Erişilebilirlik söz konusu olduğunda, her şeye göz kulak olmanıza yardımcı olacak giderek artan bir araç ve kaynak listesi var: A11y Kaynakları.

Küratörlüğünü Hannah Milan'ın yaptığı bu liste, başlangıçta 200'den fazla elle seçilmiş erişilebilirlik eklentisini, aracı, makaleyi, vaka incelemesini, tasarım modellerini, tasarım kaynaklarını, erişilebilirlik standartlarını ve hatta kontrol listelerini takip etmek için oluşturuldu. Elbette, eksik bir şey görürseniz her zaman bir araç gönderebilirsiniz.

Üçüncü Taraf Bileşen Erişilebilirliği

Özel seçimler, otomatik tamamlamalar veya tarih seçiciler gibi yeniden kullanılabilir bileşenler güçlü yardımcılardır. Ancak, erişilebilir olduğunu iddia eden birçok üçüncü taraf bileşeninin, biraz daha derine indiğinizde yalnızca kısmen erişilebilir olduğu ortaya çıkıyor. Hidde de Vries'in belirttiği gibi, ARIA Yazma Uygulamaları Kılavuzu 1:1'i uygulayan bileşenler bile kritik olabilir çünkü kılavuz ekran okuyucu erişilebilirliği veya kullanıcı deneyimi hakkında iddialarda bulunmaz. Peki gerçekten erişilebilir olan bu bileşenleri nasıl bulacaksınız?

Hidde, bir bileşenin erişilebilirliği hakkında biraz daha emin olmak için sorabileceğiniz soruların bir listesini yayınladı: Nasıl test ettiler? Kimlerle test yaptılar? Yaklaşımlarının artıları ve eksileri hakkında açıklar mı? Ve bileşeni kim yarattı? Ayrıca, erişilebilir olduğunu iddia eden bir bileşenin vaadini yerine getirip getirmeyeceğini değerlendirmenize yardımcı olacak topluluktan bazı değerli ipuçlarını da paylaşıyor.

Toplama

Erişilebilirlik topluluğunda, anlambilim ve erişilebilirlik üzerine çok sayıda makaleye sahip Steve Faulkner ve genel olarak erişilebilirlik üzerine çok sayıda makaleye sahip Leonie Watson gibi inanılmaz insanlar tarafından kesinlikle düzinelerce ve yüzlerce önemli yönerge vardır. Herkesi listelemek imkansız, ancak her katkı için içtenlikle minnettarız.

Muhtemelen bazı önemli ve değerli teknikleri ve kaynakları kaçırdık! Bu yüzden lütfen bir yorum bırakın ve onlara bakın - bu gönderiyi güncellemeyi ve hepimizin geri dönebilmesi ve güvenilir, erişilebilir bileşenleri daha hızlı oluşturabilmesi için güncel tutmayı çok isteriz.

Bu araç ve tekniklerin günlük işlerinizde faydalı olacağını ve en önemlisi zaman alıcı, rutin görevlerden kaçınmanıza yardımcı olacağını içtenlikle umuyoruz.

Erişilebilir kalın!

Teşekkür ederim! ️

@jamsandwich, Courtney Heitman, Stephanie Eckles, Adam Silver, Daniela Kubesch, Tanisha Sabherwal, Manuel Matuzovic, Vadim Makeev, Kitty Giraudel, Ian James, Juha Lehtonen, Heydon Pickering, Shivani Gupta, Jason Webb, Alex Kallinikos, Scott'a çok teşekkürler. O'Hara, Sara Soueidan, Sasha Chudesnov, Adam Liptrot, Holger Bartel, Kim Johannesen ve bu makaleye katkıları için erişilebilirlik konusunda tutkuyla çalışan herkes. Topluluk önemlidir.

Erişilebilirlik Hakkında Daha Fazlası

• CSS Denetim Araçları
• CSS Üreticileri
• Erişilebilir Modellerin Karmaşık Dünyasını Çözmek
• Hareket Hassasiyetleri İçin Azaltılmış Hareketle Tasarım
• Web'i Ekran Okuyucu Kullanarak Bir Gün Kullandım
• Chrome Geliştirici Araçları'nda Erişilebilirlik
• Bugün CSS ile Yapabilecekleriniz
• Ayrıca, sonrakileri kaçırmamak için bültenimize abone olun.