Drzewo dostępności — co to jest?
Uproszczona wersja drzewa DOM, którą przeglądarka generuje dla technologii asystujących (czytników ekranu). Zawiera tylko elementy istotne dla dostępności: role, nazwy, stany i relacje.
Jak to działa?
Przeglądarka bierze drzewo DOM (każdy element HTML) i tworzy z niego uproszczone drzewo dostępności. Elementy dekoracyjne (divy bez roli, ikony bez alt textu) są pomijane, a elementy interaktywne (przyciski, linki, inputy) są eksponowane z ich rolami i etykietami. Na przykład, staje się w drzewie dostępności: rola "button", nazwa "Zapisz", stan "enabled". Możesz sprawdzić drzewo dostępności w Chrome DevTools (zakładka Accessibility). Jeśli element jest niewidoczny w drzewie dostępności, czytnik ekranu go nie "zobaczy".
Dlaczego to ważne?
Drzewo dostępności to to, co "widzi" czytnik ekranu. Jeśli Twój piękny interfejs ma puste drzewo dostępności, dla osób niewidomych jest niewidoczną pustą stroną.