Erişilebilirlik temelleri
- React kursu
- İleri seviye
- Ders 41/56
- 4 dk
Erişilebilir bileşenlerin neden önemli olduğunu öğrenirsin.
Erişilebilirlik temelleri
Erişilebilirlik (a11y), uygulamayı ekran okuyucu, klavye ve sesli komut kullanan herkesin rahatça kullanabilmesi demektir. Semantik HTML işin çoğunu yapar: <button> doğal olarak odaklanılabilir ve Enter ile tetiklenir.
Özel bileşenlerde role ve aria-label ile anlam eklersin. Odak sırası görsel sırayla aynı olmalıdır. Renk tek başına anlam taşımamalı; metinle birlikte bir ikon da göster.
Erişilebilirlik klavye kısayolu seven herkes için de konfor sağlar.
ARIA ve klavye
ARIA yalnızca semantik HTML yetersiz kaldığında kullanılır. En sık karşılaşılan öznitelikler aria-label, aria-expanded ve aria-hidden'dır.
Bir açılır menüde düğme aria-expanded ile açık/kapalı durumunu bildirmelidir. Klavye kullanıcısı Tab ile gezer, Enter ve Esc ile etkileşir.
tabIndex değerini 0 yaparak özel bir elemanı sekme sırasına alabilirsin; -1 ile yalnızca programatik odak verirsin.
Uygulama IconButton bileşenini yaz
IconButton bileşeni yaz. label özelliğini alsın ve <button aria-label={label}> içinde bir <svg> göstersin. Dışa aktar.
Başlangıç kodu
// IconButton bileşenini buraya yazÖrnek çözüm
function IconButton({ label }) {
return (
<button aria-label={label}>
<svg width="16" height="16" />
</button>
);
}
export default IconButton;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi erişilebilir bir buton için en iyisidir?
- <button onClick={save}>Kaydet</button> Doğru cevap
- <div onclick="...">Kaydet</div>
- <span role="button">Kaydet</span>
- <a href="#">Kaydet</a>
Açıklama: button doğal olarak odaklanılabilir ve klavyeyle çalışır.
2 Boşluğu doldur: açılır menü düğmesine durum ekle
function Menu({ open }) {
return (
<button aria-expanded={____}>
Menü
</button>
);
}function Menu({ open }) {
return (
<button aria-expanded={open}>
Menü
</button>
);
}Açıklama: aria-expanded, open değerini alır.
3 Erişilebilirlik kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
aria-label |
Görünür metin yokken etiket |
tabIndex 0 |
Sekme sırasına al |
role |
Anlam ekler |
Esc |
Menüyü kapatır |