Meydan okuma: Erişilebilir modal

ARIA, klavye ve portal ile tam erişilebilir bir modal yazarsın.

Meydan okuma: Erişilebilir modal

Bu meydan okumada erişilebilir bir modal yazacaksın. Modal kökü role="dialog" ve aria-modal="true" taşır. useRef ile odağı modal içine alırsın.

Kapatma düğmesi aria-label ile etiketlenir. Esc tuşu modalı kapatır; useEffect içinde bir keydown dinleyicisi eklersin. Modal açıkken odak modal içinde kalır; Tab ile dışarı çıkılmaz.

Uygulama AccessibleModal bileşenini yaz

AccessibleModal yaz. useRef(null) ve useEffect içinde ref.current.focus(). Kök <div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}> olsun, içinde <button aria-label="Kapat" onClick={onClose}>X</button> bulunsun. onClose özelliği alsın. Dışa aktar.

Örnek çözümü göster

import { useRef, useEffect } from 'react';

function AccessibleModal({ onClose }) {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.focus();
  }, []);
  return (
    <div role="dialog" aria-modal="true" tabIndex="-1" ref={ref}>
      <button aria-label="Kapat" onClick={onClose}>X</button>
    </div>
  );
}
export default AccessibleModal;

Kendini test et

Erişilebilir modalda Esc tuşu ne yapmalı?
- Formu göndermeli
- Sayfayı yenilemeli
- Hiçbir şey
- Modalı kapatmalı
Cevabı göster

Modalı kapatmalı — Esc modalı kapatmalı.

Boşluğu doldur: kapatma düğmesini etiketle

<button ____="Kapat" onClick={onClose}>X</button>

Cevabı göster

<button aria-label="Kapat" onClick={onClose}>X</button>

Sıradaki ders: İleri seviye bölüm sınavı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler