Erişilebilirlik temelleri

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.

Örnek çözümü göster

function IconButton({ label }) {
  return (
    <button aria-label={label}>
      <svg width="16" height="16" />
    </button>
  );
}
export default IconButton;

Kendini test et

Aşağıdakilerden hangisi erişilebilir bir buton için en iyisidir?
- <button onClick={save}>Kaydet</button>
- <div onclick="...">Kaydet</div>
- <span role="button">Kaydet</span>
- <a href="#">Kaydet</a>
Cevabı göster

<button onClick={save}>Kaydet</button> — button doğal olarak odaklanılabilir ve klavyeyle çalışır.

Boşluğu doldur: açılır menü düğmesine durum ekle

function Menu({ open }) {
  return (
    <button aria-expanded={____}>
      Menü
    </button>
  );
}

Cevabı göster

function Menu({ open }) {
  return (
    <button aria-expanded={open}>
      Menü
    </button>
  );
}

Erişilebilirlik kavramlarını eşleştir

aria-label

Görünür metin yokken etiket
tabIndex 0

Sekme sırasına al
role

Anlam ekler
Esc

Menüyü kapatır

Sıradaki ders: ARIA ve klavye

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler