Drzewo dostępności: co słyszą czytniki ekranu
Jak przeglądarka buduje równoległe drzewo na podstawie DOM
Drzewo dostępności: co słyszą czytniki ekranu to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Równoległe drzewo
Przeglądarka przekształca DOM w drugą strukturę nazywaną drzewem dostępności. To właśnie tę wersję odczytują technologie asystujące.
Zbudowane na podstawie DOM
Drzewo dostępności jest tworzone bezpośrednio na podstawie kodu HTML. Dobra semantyka daje bogate drzewo, a div soup — puste i bezużyteczne.
Węzły mają rolę
Każdy węzeł ma rolę, która określa, czym jest: buttonem, nagłówkiem, linkiem lub listą. Prawdziwy button otrzymuje rolę button bez żadnego wysiłku z Państwa strony.
Węzły mają nazwę
Każdy węzeł ma również dostępną nazwę — tekst wypowiadany przez czytnik ekranu. W przypadku buttona jest to zwykle widoczna etykieta znajdująca się w jego wnętrzu.
<button>Save changes</button>Węzły mają stan
Węzły interaktywne udostępniają również stan, na przykład zaznaczony, rozwinięty lub wyłączony. Dzięki temu użytkownik słyszy, że pole wyboru jest już zaznaczone.
Rola, nazwa, stan, wartość
Każdy węzeł sprowadza się więc do roli, nazwy, stanu i wartości. Ten niewielki zestaw zawiera wszystko, czego czytnik ekranu potrzebuje do ogłoszenia elementu.
Ukryte elementy wypadają z drzewa
Wszystko, co ukryto za pomocą display none lub aria-hidden, jest usuwane z drzewa. Jeśli czegoś nie ma w drzewie, czytnik ekranu nie może do tego dotrzeć.
<span aria-hidden="true">decorative</span>Piksele nie należą do drzewa
Wygląd wizualny, taki jak kolor i rozmiar, nigdy nie trafia do drzewa dostępności. Użytkownik czytnika ekranu otrzymuje znaczenie i strukturę, a nie układ strony.
Zły kod znaczników, uszkodzone drzewo
Klikalny div trafia do drzewa jako ogólny węzeł bez roli i nazwy. Użytkownik nie słyszy niczego użytecznego, mimo że element wygląda jak button.
Można je przeanalizować
Narzędzia deweloperskie przeglądarki pokazują aktualne drzewo dostępności dowolnego elementu. To najszybszy sposób, aby sprawdzić, co rzeczywiście ogłosi czytnik ekranu.
Kod znaczników jest źródłem
Najważniejsza lekcja: kod znaczników jest źródłem drzewa. Popraw HTML, a drzewo poprawi się samo — bez potrzeby dodatkowych poprawek.
Szybkie sprawdzenie
Sprawdźmy, co słyszą czytniki ekranu.
Podsumowanie
Drzewo dostępności to DOM sprowadzony do roli, nazwy, stanu i wartości. Popraw kod znaczników, a drzewo za nim podąży. Ukryte elementy wypadają z drzewa. 🎉
Często zadawane pytania
Czy lekcja „Drzewo dostępności: co słyszą czytniki ekranu” jest bezpłatna?
Tak — pełny tekst „Drzewo dostępności: co słyszą czytniki ekranu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Drzewo dostępności: co słyszą czytniki ekranu”?
Jak przeglądarka buduje równoległe drzewo na podstawie DOM Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Drzewo dostępności: co słyszą czytniki ekranu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Znaczniki mają znaczenie: dlaczego zupa div nie działa
- Elementy tekstowe: akapity, listy i wyróżnienia
- Drzewo dostępności: co słyszą czytniki ekranu
- Natywny czy niestandardowy: kiedy użyć prawdziwego elementu