ARIA ve klavye
- React kursu
- İleri seviye
- Ders 42/56
- 4 dk
aria-label, aria-expanded ve klavye kullanımını öğrenirsin.
Akordeon ve ARIA
Bir akordeon bölümünde her başlık bir <button> olmalı ve aria-expanded ile aria-controls taşımalıdır. Açılacak panel role="region" ve aria-labelledby ile başlığa bağlanır.
Klavyeyle gezerken Tab başlıklar arasında geçer; Enter ilgili paneli açıp kapatır. Home ve End ile ilk ve son başlığa atlanır.
Odak halkası kaldırılmamalı; yalnızca :focus-visible ile inceltilebilir.
Odak yönetimi
Bir modal açıldığında odak modal içine taşınmalı; kapatıldığında tetikleyen elemana geri verilmelidir. Buna focus trap denir.
React'te useRef ile modal köküne bir referans tutar, useEffect içinde ref.current.focus() çağrısı yaparsın. Kapatma sırasında önceki odağı geri yüklersin.
Modal kökü role="dialog" ve aria-modal="true" taşır.
Uygulama AccessibleModal iskeletini yaz
AccessibleModal bileşeni yaz. useRef(null) ile bir ref tut, useEffect içinde ref.current.focus() çağır. Kök <div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}> olsun. Dışa aktar.
Başlangıç kodu
import { useRef, useEffect } from 'react';
// AccessibleModal bileşenini buraya yazÖrnek çözüm
import { useRef, useEffect } from 'react';
function AccessibleModal() {
const ref = useRef(null);
useEffect(() => {
ref.current.focus();
}, []);
return (
<div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}>
İçerik
</div>
);
}
export default AccessibleModal;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: paneli başlığa bağla
<button aria-expanded={open} aria-controls="panel-1">Başlık</button>
<div id="panel-1" role="____" aria-labelledby="btn-1">İçerik</div><button aria-expanded={open} aria-controls="panel-1">Başlık</button>
<div id="panel-1" role="region" aria-labelledby="btn-1">İçerik</div>Açıklama: Panel role="region" olur.
2 Modal açıldığında odak ne yapmalı?
- Sayfanın en üstüne gitmeli
- Modal içine taşınıp kapanışta tetikleyiciye dönmeli Doğru cevap
- Hiç değişmemeli
- Yalnızca ekran okuyucuda hareket etmeli
Açıklama: Açılışta içer, kapanışta tetikleyiciye geri.
3 Klavye ve ARIA eşleştir
| Kavram | Anlamı |
|---|---|
Tab |
Odaklar arasında geç |
Enter |
Düğmeyi tetikler |
Esc |
Modalı kapatır |
Shift+Tab |
Geriye doğru gider |