Stan Stan globalny

`aria-hidden`

Usuwa element i wszystkich jego potomków z drzewa dostępności. Użytkownicy widzący nadal widzą element; technologia wspomagająca nigdy do niego nie dociera. Stosuj wyłącznie dla treści dekoracyjnych; nigdy nie nakładaj na element, który może otrzymać fokus.

Kiedy używać

Na treściach dekoracyjnych, które nic nie wnoszą dla użytkowników czytników ekranu — zazwyczaj ikonach obok etykiety tekstowej, separatorach, grafikach tła lub zduplikowanym tekście służącym wyłącznie celom layoutu. Oznaczanie tych elementów aria-hidden="true" pozwala drzewu dostępności skupić się na treściach znaczących.

Porównanie z podobnymi mechanizmami:

aria-hidden="true" — widoczny dla użytkowników widzących, niewidoczny dla technologii wspomagającej. Element nadal zajmuje miejsce w layoucie.
CSS display: none i atrybut HTML hidden — niewidoczny dla wszystkich (użytkowników widzących i technologii wspomagającej). Element nie jest renderowany w ogóle.
CSS visibility: hidden — niewidoczny dla wszystkich, ale element nadal zajmuje miejsce w layoucie.
Atrybut inert — element i jego potomkowie są nieaktywni pod kątem fokusu, zdarzenia kliknięcia są blokowane, ale pozostają w drzewie dostępności (w odróżnieniu od aria-hidden). Właściwe narzędzie dla tła modali i wygaszanych ekranów.

Co kluczowe: nigdy nie nakładaj aria-hidden="true" na element, który jest — lub zawiera — element z możliwością fokusu. Użytkownicy klawiatury nadal mogą na niego trafić tabulatorem, ale czytnik ekranu nie ogłosi go. Lądują na elemencie, który jest dla nich niewidoczny. To jeden z najczęściej raportowanych błędów axe-core.

Jak utrzymywać synchronizację

Prawidłowe wartości to "true", "false" i "undefined". Użyteczna jest wartość "true"; "false" istnieje, by nadpisać aria-hidden na elemencie nadrzędnym, co w praktyce jest prawie nigdy potrzebne.

Stan może być statyczny (ikona zawsze dekoracyjna) lub dynamiczny. Jeśli przełączasz aria-hidden na obszarze — na przykład ukrywając główną aplikację gdy modal jest otwarty — synchronizuj go z rzeczywistym stanem wizualnym i łącz z inert, by obszar był też nieaktywny pod kątem fokusu.

Typowe błędy

aria-hidden="true" na elemencie, który może otrzymać fokus — najczęściej zgłaszany problem axe-core.
Używanie aria-hidden do ukrycia widocznego tekstu, którego czytniki ekranu nie powinny czytać. Usuń tekst lub przenieś go poza DOM.
Pomięcie aria-hidden="true" na czysto dekoracyjnej ikonie obok opatrzonego etykietą przycisku — czytnik ekranu ogłasza dostępną nazwę ikony oprócz etykiety przycisku.
Ustawienie aria-hidden="true" na elemencie <body> lub <main> w celu zablokowania treści tła za modalem, bez jednoczesnego użycia inert — fokus klawiatury nadal może uciec.
Używanie aria-hidden="false" do „pokazania” czegoś ukrytego przez CSS. CSS nadal to ukrywa.

Przykład

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Zapisz
</button>