Standardy · ARIA

Rola Widget

switch

Oznacza element jako przełącznik włącz/wyłącz. Funkcjonalnie zbliżony do pola wyboru, ale ogłaszany jako „przełącznik, włączony" lub „przełącznik, wyłączony" zamiast „zaznaczony" — lepiej pasuje do przełącznika ustawień. Nie ma jeszcze natywnego odpowiednika HTML.

Kiedy używać

Dla binarnej kontrolki ustawień, gdzie „włączone” i „wyłączone” opisują stan lepiej niż „zaznaczone” i „odznaczone” — Wi-Fi, tryb ciemny, powiadomienia, tryb samolotowy. Nie ma natywnego elementu HTML switch, więc masz dwa prawidłowe podejścia:

  1. <button type="button" role="switch" aria-checked="false"> — preferowane, ponieważ dziedziczysz natywny fokus i aktywację przycisku.
  2. <input type="checkbox" role="switch"> — również dopuszczalne; przesyłanie formularza nadal działa, a nadpisanie roli zmienia sposób ogłaszania przez technologie asystujące.

Nie używaj role="switch" dla rzeczy, które nie są naprawdę binarne. Jeśli akcja nawiguje, otwiera menu lub uruchamia proces, użyj button lub link.

Obsługa klawiatury i kontrakt fokusu

Zgodnie z wzorcem APG dla przełącznika:

  • Tab przenosi fokus na przełącznik.
  • Spacja przełącza aria-checked. Enter POWINIEN również przełączać (APG zaleca oba, ponieważ użytkownicy oczekują zachowania podobnego do przycisku od przełącznika opartego na przycisku).
  • Fokus pozostaje na przełączniku po przełączeniu.

aria-checked przyjmuje tylko "true" lub "false" dla przełącznika — "mixed" jest tu nieprawidłowe.

Typowe błędy

  • role="switch" bez aria-checked przy pierwszym renderowaniu. Stan jest wymagany.
  • aria-checked="mixed" na przełączniku. Prawidłowe tylko dla pola wyboru.
  • Używanie aria-pressed zamiast aria-checked. aria-pressed należy do przycisku przełączającego (wyciszenie/odwyciszenie), gdzie przycisk wykonuje akcję. Przełącznik reprezentuje stan ustawienia.
  • Przełącznik, który nie aktualizuje aria-checked po przełączeniu za pomocą tylko CSS.
  • Małe obszary klikalne przełącznika, które nie spełniają wymagań WCAG 2.5.8 dotyczących rozmiaru celu. Interaktywny obszar musi osiągać 24×24 piksele CSS.

Przykład

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Tryb ciemny
</button>