EMZETT.
Giriş yap

Emzett Wiki

Erişilebilir web siteleri: ARIA, odak ve klavye kullanımı

Properties1
tagsfrontend, barrierefreiheit

2 dakika okuma süresi

Erişilebilir web siteleri: ARIA, odak ve klavye kullanımı

Kısaca: Erişilebilir sayfalar klavye ve ekran okuyucuyla tamamen kullanılabilir; temel kural önce doğru HTML öğelerini kullanmak ve ARIA’yı yalnızca HTML’in yetmediği yerde eklemektir.

Biraz daha ayrıntılı: İnsanlar web sitelerini ekran okuyucularla, yalnızca klavyeyle, sesle kontrolle veya büyütülmüş olarak kullanır. Erişilebilirlik diğer herkese de yardımcı olur: parlak güneş ışığında, kırık bir kolla ya da gürültüde.

Ayrıntılı

Önce anlamsal HTML

  • Eylemler için <button>, gezinme için <a href>; <div onclick> değil.
  • <h1>’den <h6>’ya mantıklı sırada başlıklar; <nav>, <main>, <header>, <footer> ile bölgeler.
  • <label for> ile formlar; anlamlı bir alt ile görseller (dekoratif: alt="").
  • <th> ve scope ile tablolar.

Gerçek bir <button>, klavye işleme, odak ve rolü ücretsiz getirir.

Klavye ve odak

  • Kullanılabilir her şeye Tab, Enter/Boşluk ve ok tuşlarıyla ulaşılabilmelidir.
  • Görünür odak halkası (:focus-visible); asla yalnızca outline: none ayarlama.
  • Sıra kaynağı izler; tabindex="0"’ı idareli kullan, pozitif değerlerden kaçın.
  • Diyaloglar: odağı içeri taşı, içeride tut, Esc ile kapat, sonra tetikleyiciye geri ver.
  • En üstte atlama bağlantısı (“İçeriğe geç”).

ARIA’yı doğru kullanmak

ARIA (Accessible Rich Internet Applications) roller ve durumlar ekler: aria-label, aria-expanded, aria-live (durum mesajları), role="dialog". Kurallar: ARIA olmaması, kötü ARIA’dan iyidir. ARIA yalnızca yardımcı teknolojinin duyurduğunu değiştirir, davranışı değil; klavye işlemeyi kendin kurmalısın. Yeni içeriği (hata mesajları, toast’lar) bir canlı bölgede duyur.

Test etmek

  • Yalnızca klavyeyle gez.
  • Bir ekran okuyucu dene (NVDA, VoiceOver, TalkBack).
  • Kontrastı denetle (WCAG: metin için 4,5:1).
  • Araçlar: Lighthouse, axe; sorunların kabaca %30–40’ını bulurlar, gerisi için insanlar gerekir.
  • Hukuken önemli: birçok dijital sunum için 28 Haziran 2025’ten itibaren Alman Barrierefreiheitsstärkungsgesetz (BFSG).

Ayrıca bak: WCAG ve renk kontrastı, Ekran okuyucular ve yardımcı teknolojiler, Lighthouse ve Core Web Vitals