aria-checked

Kiedy używać

Na widżetach posiadających binarną lub trójstanową semantykę zaznaczenia: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio" i role="switch". Jeśli używasz natywnego <input type="checkbox"> lub <input type="radio">, przeglądarka już eksponuje stan zaznaczenia do technologii wspomagających — nie duplikuj go atrybutem aria-checked.

Rozróżnij od sąsiednich stanów:

• aria-checked — dla „ta opcja jest wybrana ze zbioru opcji, często niezależnie od innych”. Pola wyboru i przyciski radio.
• aria-pressed — dla przycisków przełączających (wycisz / odcisz). Element jest koncepcyjnie przyciskiem; stan określa, czy akcja jest aktualnie włączona.
• aria-selected — dla elementów wewnątrz kontenera z pojedynczym wyborem, takich jak tablist, listbox lub tree. Stan należy do modelu selekcji kontenera, nie do samego elementu.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true", "false", "mixed" i "undefined". Używaj "mixed" tylko na nadrzędnym polu wyboru podsumowującym grupę podrzędnych pól w niespójnych stanach (klasyczny wzorzec nieokreślonego „zaznacz wszystkie”). "undefined" jest rzadkie w praktyce; większość autorów używa zamiast tego "false".

Atrybut musi odzwierciedlać to, co widzi użytkownik. Cokolwiek handler kliknięcia i klawiatury aktualizuje wizualny znacznik zaznaczenia, musi również zapisać nową wartość aria-checked w tej samej ścieżce kodu. Nigdy nie styluj wyglądu „zaznaczonego” z CSS bez przełączania atrybutu.

W przypadku role="radio" wewnątrz radiogroup dokładnie jedna opcja powinna mieć aria-checked="true" w danym momencie; pozostałe muszą mieć "false" (nie mogą być nieobecne).

Typowe błędy

• Całkowite pominięcie aria-checked na elemencie role="checkbox" — czytnik ekranu ogłasza „pole wyboru” bez stanu.
• Przełączanie klasy do pokazania znacznika, bez aktualizowania aria-checked.
• Użycie aria-checked="true" na natywnym <input type="checkbox"> — przeglądarka go ignoruje, a zduplikowany stan może się desynchronizować.
• Ustawienie aria-checked="mixed" na pojedynczym polu wyboru zamiast na elemencie nadrzędnym podsumowującym potomków.
• Pozostawienie przycisków radio bez aria-checked="false" — technologia wspomagająca nie może wywnioskować stanu niezaznaczonego.
• Mylenie aria-checked z aria-selected w opcjach listbox lub zakładkach.

Przykład

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Preferencje e-mail</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Wysyłaj mi tygodniowe podsumowania
  </div>
</div>