Web geliştiricileri için erişilebilirlik

Erişilebilirliği iyileştirmek, sitenizi herkes için daha kullanışlı hale getirir.

Addy Osmani

İpucu: Her zaman kullanabileceğiniz erişilebilirliği öğrenin. erişilebilirlik kursuna ve referanslarına göz atın.

Herkes için kapsayıcı ve erişilebilir siteler oluşturmak önemlidir. Optimize edebileceğiniz en az altı temel engellilik alanı vardır: görsel, işitme, hareket, biliş, konuşma ve nöral. Birçok araç ve kaynak size bu konuda yardımcı olabilir. web erişilebilirliği konusunda tamamen yeni olsanız bile.

Bir milyardan fazla insan bir şekilde engel oluyor.

Erişilebilir olması için sitelerin birden çok cihazda çalışması gerekir giriş türlerini (ör. ekran okuyucular) değiştirebilir. Ayrıca, siteler en geniş kullanıcı grubu tarafından kullanılabilmelidir. engelliler de dahil.

Kullanıcılarınızın sahip olabileceği engellerden bazıları şunlardır:

Görsel	İşitme	Hareket
Az görme Körlük Renk körlüğü Katarakt Güneş parlaması	İşitme zorluğu İşitme engeli Gürültü Kulak enfeksiyonu	Omurilik yaralanması Sınırlı el becerisi Eller dolu
Bilişsel	Konuşma	Nöral
Öğrenme güçlüğü Uyku hali veya dikkat dağınıklığı Migren Otizm El koyma	Ortam gürültüsü Boğaz ağrısı Konuşma engeli Konuşamıyorum	Depresyon PTSD Bipolar bozukluk Kaygı

Görsel sorunlar, renkleri ayırt edememe veya hiç görmeme arasında değişir.

• Metin içeriğinin minimum değerleri karşıladığından emin olun kontrast oranı eşiği.
• Bilgileri iletmekten kaçının Yalnızca renklerden oluşan bir ürün ve tüm metinlerin resizable.
• Tüm kullanıcı arayüzü bileşenlerinin yardımcı teknolojilerle kullanılabildiğinden emin olun ekran okuyucular, büyüteçler ve braille ekranlar gibi. Bu, kullanıcı arayüzü bileşenlerinin işaretlenmesini ve erişilebilirlik API'lerinin, uygulamanızın role, state, value ve title.

İpucu: Tarayıcıdaki öğe inceleme özelliği, Renk kontrast oranı için hızlı bir kontrol içeren CSS özellikleri.

Şahsen az gören birileriyle yaşıyorum ve kendimi sıklıkla web sitelerine, Geliştirici Araçları'nı ve terminalini kullanabilirsiniz. Yakınlaştırmayı desteklemek neredeyse hiçbir zaman geliştiricilerin yapılacaklar listeleri, benim gibi kullanıcılar için çok büyük bir fark yaratabilir.

İşitme sorunları, kullanıcının sayfadan gelen sesi duyma konusunda sorun yaşayabileceği anlamına gelir.

• Sağlama metin alternatifleri tamamen metinden olmayan tüm içerikler için geçerlidir.
• Kullanıcı arayüzü bileşenlerinizin hâlâ işlevsel olup olmadığını test edin sessiz.

Hareket sorunları; fare, klavye veya klavye kullanamamayı içerebilir. bir dokunmatik ekran.

• Kullanıcı arayüzü bileşenlerinizin içeriğini oluşturun işlevsel olarak klavyeden erişilebilir kullanıcının fareyi kullanması gerektiği anlamına gelir.
• Sayfaların, aşağıdakiler de dahil olmak üzere yardımcı teknolojiler için doğru şekilde işaretlenmesini sağlayın: içeren fiziksel geçiş kontrolleri, genellikle aynı API'leri kullanırsınız.

Bilişsel sorunlar, kullanıcının yardımcı teknolojilere ihtiyaç duyabileceği anlamına gelir yardımcı olmak için tasarladık. Bu nedenle, alternatif metinlerin bulunmasını sağlamak önemlidir.

• Animasyonları kullanırken dikkatli olun. Kapsamlı olmayan tekrar veya flash ile sorunlara yol açabilir bazı kullanıcılar için

  prefers-reduced-motion CSS medya sorgusu, animasyonları sınırlamanızı sağlar daha az hareketi tercih eden kullanıcılar için otomatik oynatma özellikli videolar sunar:

  /*
  If the user expresses a preference for reduced motion, don't use animations on buttons.
  */
  @media (prefers-reduced-motion: reduce) {
    button {
      animation: none;
    }
  }
  

• Şu etkileşimlerden kaçının: zamanlamaya dayalı.

Bu, ele alınması gereken çok fazla konu gibi görünebilir, ama değerlendirme aşamasında kullanıcı arayüzü bileşenlerinizin erişilebilirliğini iyileştiriyoruz.

GOV.UK erişilebilirlik ekibi, daha fazla görsel destek sağlamak için erişilebilirlikle ilgili yapılması ve yapılmaması gerekenler dijital posterler, ekibinizle en iyi uygulamaları paylaşmak için kullanabilirsiniz.

Erişilebilirlikle ilgili en iyi uygulamaların yer aldığı altı poster. Şunu okuyun: tam metin.

Kullanıcı arayüzü bileşeni erişilebilirliğini ölçme

Sayfanızın kullanıcı arayüzü bileşenlerini erişilebilirlik açısından denetlerken kendinize şunları sorun:

• Kullanıcı arayüzü bileşeninizi yalnızca klavyeyle kullanabilir misiniz?

  Bileşen, odağı yönetiyor ve odak tuzaklarından kaçınıyor mu? Uygun klavye etkinliklerine yanıt verebiliyor mu?

• Kullanıcı arayüzü bileşeninizi bir ekran okuyucuyla kullanabilir misiniz?

  Görsel olarak sunulan bilgiler için alternatif metin seçenekleri sağladınız mı? ARIA'yı kullanarak anlamsal bilgi eklediniz mi?

• Kullanıcı arayüzü bileşeniniz ses olmadan çalışabilir mi?

  Hoparlörlerinizi kapatın ve kullanım alanlarınızın üzerinden geçin.

• Kullanıcı arayüzü bileşeniniz renksiz çalışabilir mi?

  Kullanıcı arayüzü bileşeninizin, renkleri göremeyen biri tarafından kullanılabileceğinden emin olun. Renk körlüğünü simüle etmek için yararlı bir araç, Renk körlüğü. (Renk körlüğü simülasyonunun dört biçimini de deneyin.) Ayrıca, Daltonize uzantısına sahiptir. Bu da benzer şekilde faydalıdır.

• Kullanıcı arayüzü bileşeniniz, yüksek kontrast modu etkinken çalışabilir mi?

  Tüm modern işletim sistemleri yüksek kontrast modunu destekler. Yüksek Kontrast burada yardımcı olabilecek bir Chrome uzantısıdır.

Standartlaştırılmış kontrollerin (<button> ve <select> gibi) erişilebilirlik özelliği vardır yerleşik olarak bulunur. Bu öğelere Tab tuşu kullanılarak odaklanılabilir; klavye etkinliklerine (Enter, Space ve ok tuşları gibi) yanıt verirler; ve erişilebilirlik araçları tarafından kullanılan anlamsal rollere, durumlara ve özelliklere sahiptir. Varsayılan stil, belirtilen erişilebilirlik koşullarını da karşılamalıdır.

Özel kullanıcı arayüzü bileşenleri (standartları genişleten bileşenler hariç <button> gibi öğeler) yerleşik özelliklere sahip değildir. o yüzden bunları sağlamanız gerekir. Projenin gidişatı boyunca bileşeninizi benzer bir standartla karşılaştırmak, öğe (veya ne kadar karmaşık olduğuna bağlı olarak birkaç standart öğenin bileşenine göre).

Tarayıcı geliştirici araçlarının çoğu, bir sayfanın erişilebilirlik ağacının incelenmesini destekler. Bu özellik, Chrome Geliştirici Araçları'nda Öğeler panelindeki Erişilebilirlik sekmesinde bulunur.

Firefox'ta da bir Erişilebilirlik paneli bulunur.

Safari, erişilebilirlik bilgilerini Öğeler panelinin Düğüm sekmesinde gösterir.

Aşağıda, kullanıcı arayüzü bileşenlerinizi daha erişilebilir hale getirmeye çalışırken kendinize sorabileceğiniz soruların bir listesi bulunmaktadır.

Klavye odağını iyileştir

İdeal olarak, kullanıcı arayüzü bileşeninizdeki tüm işlevlere erişilebildiğinden emin olun klavyeyle kontrol edin. Kullanıcı deneyiminizi tasarlarken öğenizi yalnızca klavyeyle nasıl kullanacağınızı düşünün ve tutarlı bir klavye etkileşimi dizisi belirlemenize yardımcı olur.

Öncelikle, her bileşen için makul bir odak hedefiniz olduğundan emin olun. Örneğin, menü gibi karmaşık bir bileşen, odaklanmalıdır. Böylece, etkin menü öğesi her zaman odaklanıyor.

Karmaşık bir öğede odağı yönetme

Sekme dizinini kullan

tabindex ile öğeler ve kullanıcı arayüzü bileşenleri için klavye odağını ekleyebilirsiniz özelliğini gönderin. Kullanıcıların yalnızca klavyeyi kullanan ve yardımcı teknoloji kullanıcılarının yerleştirmesi gereken etkileşimde bulunmak için öğelere odaklanması gerekir.

Yerleşik etkileşimli öğelere (<button> gibi) dolaylı olarak odaklanılabilir. Konumlarını değiştirmeniz gerekmiyorsa, tabindex özelliğine ihtiyaçları yoktur. emin olmanız gerekir.

Üç tür tabindex değeri vardır:

• tabindex="0", en yaygın öğedir ve öğeyi doğal sekmeye yerleştirir sırası (DOM siparişiyle tanımlanır).
• -1'e eşit bir tabindex değeri, öğenin programatik olarak odaklanılabilir ancak sekme sırasında değil.
• 0'dan büyük bir tabindex değeri, öğeyi manuel sekme sırasına yerleştirir. Sayfadaki pozitif tabindex değerine sahip tüm öğeler şurada ziyaret edilir: doğal sekme sırasındaki öğelerden önce sayısal sırada.

Uyarı: Genel bir kural olarak, pozitif sekme dizinlerinden kaçının. Normal odaklanma düzenini bozma kullanıcılarınızın kafasını karıştırabilir ve rahatsız edebilir. Bu nedenle, büyük olasılıkla başarısızlık Başarı Ölçütü 2.4.3.

Makalede tabindex için bazı kullanım alanları bulun Tabindex'i kullanma.

Varsayılan odaklama halkası kullansanız da odağın her zaman görünür olduğundan emin olun kullanarak veya ayırt edilebilir özel odak stili uygulayarak Tutuşturmamaya özen gösterin klavye kullanıcıları. Odağı bir öğeden uzağa taşıyabilmelidirler. bir şekilde kullanabilirsiniz.

Not: Toplayıcı tabindex veya Ele alındığı üzere aria-activedescendant yaklaşım MDN'de.

Otomatik odaklamayı kullanma

HTML otomatik odaklama özelliği, bir yazarın belirli bir otomatik olarak ne zaman yüklendiğini öğrenebilirsiniz. autofocus şurada zaten destekleniyor: tüm web formu denetimleri kontrol edebilirsiniz. Kendi özel kullanıcı arayüzü bileşenlerinizdeki öğelere otomatik odaklamak için focus() yöntemini çağırın. odaklanılabilen tüm HTML öğelerinde desteklenir (örneğin, document.querySelector('myButton').focus()).

Klavye etkileşimi ekle

Kullanıcı arayüzü bileşeninize odaklanılabilir hale geldiğinde iyi bir klavye etkileşimi hikayesi sağlayın. Bir bileşen, uygun klavye etkinlikleri uygulanarak odaklanıldığında. Örneğin, kullanıcının menü seçeneklerini belirlemek için ok tuşlarını kullanmasına izin verin ve düğmeleri etkinleştirmek için Space veya Enter tuşlarına basın. ARIA tasarım kalıpları rehberi size yol gösterebilir.

Son olarak, klavye kısayollarınızın bulunabilir olduğundan emin olun. Yaygın olarak kullanılan bir uygulama, klavye kısayollarının açıklaması (ekranda metin) kullanmaktır. kullanıcıya kısayolların mevcut olduğunu bildirir. Örneğin, "Basın ? klavye için girin." Alternatif olarak, kullanıcıyı bilgilendirmek için ipucu gibi bir ipucu kullanılabilir bir kısayol hakkında'yı seçin.

Odaklanmayı yönetmenin önemi yadsınamaz. Önemli bir örnek gezinme çekmecesi var. Sayfaya bir kullanıcı arayüzü bileşeni eklerseniz içindeki bir öğeye odaklanmanız gerekir. Aksi takdirde, kullanıcıların bu sayfaya gitmek için tüm sayfayı kaydırması gerekebilir. Bu can sıkıcı bir durum olabilir, Bu nedenle, odağı sayfanızdaki klavyede gezinilebilen tüm bileşenlere test ettiğinizden emin olun.

İpucu: Puppeteer'ı kullanabilirsiniz. özelliğini kullanıma sunduk. WalkMe Mühendislik bu konuyla ilgili harika bir rehberim var.

// Example for expanding and collapsing a category with the Space key
const category = await page.$(`.category`);

// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);

// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);

// toggle category by pressing Space
await page.keyboard.press('Space');

// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);

Ekran okuyucu kullanımının başarılı olmasını sağlayın

Kullanıcıların yaklaşık% 1 ila% 2'si ekran okuyucu kullanıyor. Tüm önemli konuları anlayabilir misiniz? bilgi edinme ve ekran okuyucuyu ve klavyeyi kullanarak bileşenle etkileşimde bulunma tek başına mı?

Aşağıdaki sorular, ekran okuyucu erişilebilirliğini ele almanıza yardımcı olacaktır.

Tüm bileşen ve resimlerin anlamlı metin alternatifleri var mı?

Ad veya amaç ile ilgili bilgilerin her yerde görsel olarak iletildiğinden, erişilebilir bir metin alternatifi sağlar.

Örneğin, <fancy-menu> kullanıcı arayüzü bileşeniniz yalnızca bir dişli simgesi görüntülüyorsa belirtmek gerekirse, "ayarlar" gibi erişilebilir bir metin alternatifine ihtiyacı vardır. otomatik olarak oluşturabilirsiniz. Bağlama göre alt özelliğini kullanarak metin alternatifi sağlayabilirsiniz. bir aria-label özelliği, bir aria-labelledby özelliği, düz metin olarak saklayabilirsiniz. Genel teknik ipuçlarını WebAIM Hızlı Başvuru'da bulabilirsiniz.

Bir resim görüntüleyen kullanıcı arayüzü bileşenleri, bir mekanizma sağlamalıdır alt özelliğine benzer şekilde, söz konusu resim için alternatif metin sağlamak için kullanılır.

Bileşenleriniz semantik bilgi sağlıyor mu?

Yardımcı teknoloji, başka bir şekilde ifade edilen anlamsal bilgileri biçimlendirme, imleç stili veya konum gibi görsel ipuçlarıyla gören kullanıcılar Standartlaştırılmış öğeler, tarayıcı tarafından yerleşik olarak bulunan bu anlamsal bilgilere sahiptir. Ancak özel bileşenler için ARIA'yı seçin.

Genel olarak, bir fare tıklama veya fareyle üzerine gelme etkinliğini dinleyen herhangi bir bileşen bir tür klavye etkinliği işleyicisi ve bir ARIA rolüne sahip olması gerekir, ARIA durumları ve özellikleri de gösterilir.

Örneğin, özel bir <fancy-slider> kullanıcı arayüzü bileşeni, kaydırma çubuğu gibi bir ARIA rolünü alabilir. sahip bazı ilgili ARIA özellikleri bulunuyor: aria-valuenow, aria-valuemin ve aria-valuemax. Bu özellikleri özel bileşeninizdeki alakalı mülklere bağlayarak yardımcı teknoloji kullanıcılarının öğeyle etkileşimde bulunmasına izin verebilirsiniz. değerini değiştirebilir ve hatta öğenin görsel sunumunun buna uygun şekilde değişmesine neden olabilir.

Bir aralık kaydırma çubuğu bileşeni.

<fancy-slider role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="2.5">
</fancy-slider>

Kullanıcılar renklere bağlı kalmadan her şeyi anlayabilir mi?

Renkler, bilgi aktarmanın tek yöntemi olarak kullanılmamalıdır. Örneğin: bir durumu belirtme, kullanıcıdan yanıt isteme veya verileri görselleştirme. Örneğin, bir pasta grafiğiniz varsa her dilim için etiketler ve değerler sağlayın Böylece, görme engelli kullanıcılar bilgiyi anlayabilir, dilimlerin nerede başlayıp nerede bittiğini göremeseler bile:

Erişilebilir bir pasta grafik. (W3C Web Accessibility Initiative'den.)

Kontrast yeterli mi?

Bileşeninizde görüntülenen metin içeriği WCAG AA seviyesinde minimum kontrast eşiği. Temayı yansıtan yüksek kontrastlı bir tema kullanabilirsiniz. daha yüksek AAA eşiği ve kullanıcı aracısı stil sayfalarının Kullanıcı özel kontrast veya farklı renklere ihtiyaç duyuyorsa. Bu Renk Kontrast Denetleyicisi'ni kullanabilirsiniz bileşeninizi tasarlarken yardımcı olarak kullanabilirsiniz.

Hareketli veya yanıp sönen içerik durdurulabilir ve güvenli mi?

Kullanıcılar hareket eden, kayan ya da hareket eden içeriği duraklatabilmelidir, durdurabilmelidir veya beş saniyeden uzun süre yanıp söner. Genel olarak, yanıp sönen içerik kullanmaktan kaçının.

Bir şeyin yanıp sönmesi gerekiyorsa saniyede üç defadan fazla yanıp sönmediğinden emin olun.

Erişilebilirlik araçları ve testi

Projeniz için 100’den fazla araç var sitenizin erişilebilirliğini değerlendirme bileşenlerine göz atalım. Bazı araçlar otomatiktir, bazıları ise manuel test yapılmasını gerektirir.

Üzerinde düşünebileceğiniz birkaç örnek:

• Axe, otomatik erişilebilirlik sağlar tercih ettiğiniz çerçeve veya tarayıcı için test edebilirsiniz. Balta Kuklası otomatik erişilebilirlik testleri yazmak için kullanılabilir.

• Lighthouse'ta Erişilebilirlik denetimi, sık karşılaşılan erişilebilirlik sorunlarını keşfetmenize yardımcı olacak bilgiler sağlar. Erişilebilirlik puanı, tüm erişilebilirlik denetimlerinin ağırlıklı ortalamasıdır Axe kullanıcı etki değerlendirmelerine göre. Sürekli entegrasyonla erişilebilirliği izlemek için Lighthouse CI.

  

• Tenon.io, yaygın erişilebilirlik sorunlarını test etmek için kullanışlıdır. Tenon, derleme araçları ve tarayıcılarda ( hatta metin düzenleyicileri kullanabilirsiniz.

• Vurgulama için kitaplığa ve çerçeveye özgü birçok araç vardır bileşenlerle ilgili erişilebilirlik sorunları. Örneğin, şunu kullan: eslint-plugin-jsx-a11y kullanarak düzenleyicinizdeki React bileşenleriyle ilgili erişilebilirlik sorunlarını vurgulayın.

  

  Açısal, codelyzer kullanıyorsanız düzenleyici içi erişilebilirlik denetimleri de sağlar:

  

Yardımcı teknolojilerle çalışma

İpucu: Yardımcı teknoloji testinin nasıl gerçekleştirileceğini öğrenin.

• Yardımcı teknolojilerin web içeriğini görme şeklini incelemek için Erişilebilirlik Denetleyicisi (Mac) veya Windows Automation API Test Tools ve AccProbe (Windows). Chrome'un oluşturduğu erişilebilirlik ağacının tamamını da about://accessibility adresine giderek.
• Mac'te ekran okuyucu desteğini test etmenin en iyi yolu VoiceOver kullanmaktır yardımcı olur. Etkinleştirmek veya devre dışı bırakmak için ⌘F5, geçiş yapmak için Ctrl+Option ←→ kullanın. sayfayı ve erişilebilirlikte yukarı ve aşağı gitmek için Ctrl+Shift+Option + ↑↓ ağacı. Daha ayrıntılı talimatlar için VoiceOver komutlarının tam listesini inceleyin ve VoiceOver web komutlarının listesini inceleyin.

• Windows'da NVDA, ücretsiz, açık kaynak bir ekrandır yardımcı olur. Ancak bu uygulama, görme engelli kullanıcılar için zorlu bir öğrenme eğrisine sahiptir.

  

• ChromeOS'te yerleşik ekran okuyucu.

Web'de erişilebilirliği iyileştirmek için gidebileceğimiz çok şey var. Web Almanağı uyarınca:

• Her 5 siteden 4'ünde arka planla uyumlu metinler bulunur. onları okunamaz hale getirir.
• Sayfaların% 49,91'i hâlâ bazı resimleri için alt özelliklerini sağlayamıyor.
• Düğme veya bağlantı kullanılan sayfaların yalnızca% 24'ünde etiket bulunur.
• Sayfaların yalnızca% 22,33'ü tüm form girişleri için etiket sağlıyor.

İnsanlar için daha erişilebilir deneyimler oluşturmak için yapabileceğimiz .

İpucu: Erişilebilirlikle ilgili temel bilgiler hakkında daha fazla bilgi edinmek ve bunları iyileştirmeye yardımcı olmak için Herkes tarafından erişilebilir Erişilebilirlik hakkında bilgi edinin.