ARIA ve klavye

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.

Örnek çözümü göster

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;

Kendini test et

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>

Cevabı göster

<button aria-expanded={open} aria-controls="panel-1">Başlık</button>
<div id="panel-1" role="region" aria-labelledby="btn-1">İçerik</div>

Modal açıldığında odak ne yapmalı?
- Sayfanın en üstüne gitmeli
- Modal içine taşınıp kapanışta tetikleyiciye dönmeli
- Hiç değişmemeli
- Yalnızca ekran okuyucuda hareket etmeli
Cevabı göster

Modal içine taşınıp kapanışta tetikleyiciye dönmeli — Açılışta içer, kapanışta tetikleyiciye geri.
Klavye ve ARIA eşleştir

Tab

Odaklar arasında geç
Enter

Düğmeyi tetikler
Esc

Modalı kapatır
Shift+Tab

Geriye doğru gider

Sıradaki ders: i18n ve react-i18next

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler