Erişilebilir Frontend Bileşenleri Oluşturmak
Erişilebilirlik bir gerekliliktir. Bir tercih değil.
Kodlamadan önce planlayın. Kullanıcılarınızı listeleyin.
- Ekran okuyucu kullanıcıları.
- Sadece klavye kullanan kullanıcılar.
- Renk körü kullanıcılar.
Öncelikle yerel HTML kullanın.
- Butonlar için button etiketlerini kullanın.
- Formlar için input etiketlerini kullanın.
- ARIA'yı yalnızca yerel HTML yetersiz kaldığında ekleyin.
Klavyeye öncelik verin.
- Her kontrolün fare olmadan çalıştığından emin olun.
- Odak göstergelerini görünür tutun.
- Modallarda odağı hapsedin.
Görmenin ötesinde tasarlayın.
- Hataları göstermek için yalnızca renk kullanmayın.
- Uyarılara metin etiketleri ekleyin.
- Kontrast oranlarınızı kontrol edin.
Hataları iyi yönetin.
- Kullanıcılara hataları düzeltmeleri için net yollar sunun.
- Hatalı girişler için aria-invalid kullanın.
- Güncellemeler için aria-live kullanın.
Çalışmanızı test edin.
- axe-core veya Lighthouse kullanın.
- Sitenizi bir ekran okuyucu ile deneyin.
- Her butonu Tab tuşu ile test edin.
Özel div'ler yerine yerel öğeleri seçin. Zaman kazandırır. Daha iyi çalışır.