Erişilebilirlik bir cila değil

Erişilebilirliğin çoğu projede neden en sona bırakıldığını ve bunun neden yanlış olduğunu anlatarak başlayayım.

Sıfır ihlal hedefi ne demek

Bu sitede axe-core taraması her derlemede çalışıyor. Eşiğin altına düşen bir değişiklik main dalına birleştirilemiyor. "Kritik olanları düzelt, kalanını sonra" yaklaşımını bilerek uygulamıyorum — "sonra" pratikte hiç gelmiyor ve ihlaller birikiyor.

Odak halkasını neden kaldırmıyorum

outline: none tek başına yazılmıyor. Odak halkası klavye kullanıcısının sayfada nerede olduğunu bulmasının tek yolu; kaldırılması arayüzü fare kullanmayan biri için kullanılamaz hâle getiriyor. Marka rengiyle çakışmaması için odak halkasını marka renginden bağımsız, mavi tonlu tuttum — bir düğmenin üzerindeyken görünmez kalmasın.

line ile line-strong ayrımı

Süsleme çizgisi ile etkileşimli bir ögenin kenarı aynı kontrast eşiğine tabi değil. line bir liste ayırıcısıdır ve WCAG'de kontrast zorunluluğu yok; line-strong bir form alanının kenarıdır ve WCAG 1.4.11 gereği yüzeye karşı en az 3:1 olmak zorunda. İkisini aynı jetonla karıştırmak, form alanının görünmez bir kenara sahip olmasına yol açabilir.

1. 1

   Kod yazılır

2. 2

   axe-core taranır

   WCAG 2.2 AA kural kümesiyle.

3. 3

   Eşiğin altındaysa derleme durur

   Birleştirme engellenir.

4. 4

   Düzeltilir

Karşılaştırma: eşik, karşılık, doğrulama

| WCAG eşiği | Bu sitede karşılığı | Nasıl doğrulanıyor | | --------------------- | ------------------------------------ | ---------------------------------- | | Metin kontrastı 4.5:1 | ink / surface jeton çifti | pnpm contrast betiği | | Klavye erişimi | Her etkileşimli öge <button>/<a> | Elle klavye taraması + lint kuralı | | Hareket azaltma | prefers-reduced-motion küresel | globals.css içinde tek kural |

Kapanış

Erişilebilirlik burada bir iddia değil bir ölçüm. "Erişilebilir olmalı" demek yerine "sıfır ihlal" diyorum, çünkü ilki denetlenemez, ikincisi denetlenir.