Stan Stan globalny

`aria-disabled`

Wskazuje, że kontrolka jest percepcyjna i fokusowalna, ale nie reaguje na interakcję użytkownika. Preferuj natywny atrybut HTML disabled gdy jest dostępny; po aria-disabled sięgaj gdy element musi pozostać fokusowany lub może wyświetlać podpowiedź.

Kiedy stosować

Gdy przycisk, link, pole wejściowe lub złożony widget jest chwilowo nieoperacyjny, ale powinien nadal znajdować się w kolejności tabulacji, aby użytkownicy mogli go odkryć i dowiedzieć się dlaczego jest wyłączony. Ustaw aria-disabled="true" i zastosuj styl wizualny, który jednoznacznie komunikuje stan wyłączenia.

W porównaniu z powiązanymi atrybutami:

HTML disabled (na <button>, <input>, <select>, <textarea>, <fieldset>) — usuwa kontrolkę z kolejności tabulacji, ignoruje kliknięcia i uniemożliwia przesłanie wartości. Użyj gdy użytkownik nie ma nic do zrobienia z kontrolką.
aria-disabled="true" — czytnik ekranu ogłasza „wyszarzone” / „niedostępne”, ale element pozostaje fokusowany. Musisz też zablokować obsługę kliknięcia. Stosuj na niestandardowych widgetach, tagach <a> (które nie przyjmują disabled) lub gdy stan wyłączenia wymaga podpowiedzi wyjaśniającej przyczynę.
aria-readonly — wartość nie może być zmieniona, ale kontrolka jest nadal operacyjna i fokusowalna. Użytkownik może ją skopiować, formularz nadal ją prześle.
aria-hidden — usuwa element z drzewa dostępności. Inny cel: ukryty, nie wyłączony.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true" i "false". Domyślnie użyj "false" lub pomiń gdy włączony — nie ma potrzeby renderowania aria-disabled="false" na każdej aktywnej kontrolce.

Gdy aria-disabled="true":

Zablokuj działanie obsługi kliknięcia. Atrybut sam w sobie nie blokuje zdarzeń.
Zapobiegaj domyślnej aktywacji klawiaturowej (Enter, Space).
Upewnij się, że styl wizualny czytelnie komunikuje stan wyłączenia; sprawdź, czy spełnia WCAG 1.4.11 kontrast dla elementów niebędących tekstem (wygląd wyłączony jest wyraźnie zwolniony, ale wyraźna wskazówka wizualna jest i tak lepszą praktyką).

Częste błędy

Użycie aria-disabled="true" bez blokowania obsługi kliknięcia — element wygląda na wyszarzony, ale nadal wywołuje swoje działanie.
Użycie jednocześnie disabled i aria-disabled na tym samym elemencie. Natywny atrybut już eksponuje stan; duplikat jest zbędny.
Użycie aria-disabled na <a> bez usunięcia href lub zapobiegania domyślnemu zachowaniu — link nadal nawiguje.
Wyłączanie kontrolek bez wyjaśnienia przyczyny. WCAG 3.3.1 oczekuje błędu lub instrukcji.
Mylenie aria-disabled z aria-hidden. Wyłączone elementy pozostają w drzewie dostępności; ukryte znikają.

Przykład

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Submit order
</button>
<p id="submit-help">Add at least one item to your cart to enable submit.</p>