Czytniki ekranu — jak projektować zgodnie
Techniczne wskazówki dotyczące semantycznego HTML-a, atrybutów aria i struktur, które czytniki ekranu potrafią interpretować poprawnie.
Dlaczego to ważne?
W Polsce ponad 1,8 miliona osób ma ograniczoną zdolność widzenia. Czytniki ekranu to narzędzia, które zamienia tekst na mowę lub wyświetla go na monitorach brajlowskich. Projektując dla czytników, nie chodzi tylko o zgodność z WCAG — chodzi o rzeczywisty dostęp do informacji dla rzeczywistych ludzi.
Dobra wiadomość? Nie musisz być ekspertem od dostępności. Musisz tylko rozumieć, jak czytniki ekranu czytają kod. Semantyczny HTML, logiczne nagłówki i odpowiednie atrybuty aria robią 80% pracy.
Czytniki ekranu czytają strukturę, nie styl
To najważniejsza rzecz do zapamiętania. Czytnik nie widzi kolorów, fontów ani wyrównania. Słyszy (lub wyświetla) tekst w kolejności, w jakiej pojawia się w HTML-u. Jeśli zmieniłeś kolejność elementów CSS-em — czytnik przeczyta je inaczej.
Używaj odpowiednich tagów:
<header>
,
<nav>
,
<main>
,
<section>
,
<article>
. Nie
<div>
ze stylem. Czytniki rozpoznają te elementy i mogą przeskawiać między nimi — “Przejdź do następnego artykułu” zamiast czytać wszystko.
Nagłówki to mapa strony
Użytkownicy czytników nie scrollują przez stronę jak ty. Zamiast tego przeskawiają między nagłówkami. “Przejdź do następnego h2”. “Przejdź do poprzedniego h3”. Dlatego twoja struktura nagłówków musi być logiczna.
Nie rób tego: H1 H3 H2 H4. To mija się z celem. Zrób to: H1 H2 H3 H2 H3. Użytkownicy czytnika mogą wtedy zbudować mentalne obrazy struktury dokumentu.
Bonus: możesz testować to sam. Większość przeglądarek ma wbudowany czytnik — naciśnij Alt+Shift+V (Chrome), albo użyj NVDA (bezpłatny, dla Windows).
ARIA — kiedy HTML nie wystarczy
ARIA to Accessible Rich Internet Applications. To dodatkowe atrybuty, które mówią czytnikowi, co robi element, jeśli HTML tego nie wyjaśnia. Ale uwaga — ARIA to ostateczność, nie pierwsze rozwiązanie.
Złota reguła: Użyj semantycznego HTML-a. Jeśli to nie jest możliwe, użyj ARIA. Nigdy nie usuwaj znaczenia semantycznego za pomocą CSS-a, żeby potem dodać je z powrotem ARIA-ą.
Przykłady:
aria-label
dla ikon (kiedy ikona jest przyciskiem),
aria-hidden="true"
dla elementów czysto dekoracyjnych,
role="navigation"
dla elementów, które nie są
<nav>
.
Formularz bez etykiet? Nie dla czytnika
Jeśli pole input nie ma etykiety, czytnik nie wie, do czego służy. Połącz je za pomocą
<label for="input-id">
. To najprostsze, a najczęściej pomijane.
Placeholder nie zastępuje label. “Wpisz email” w szarym tekście nie wystarczy. Czytnik musi wiedzieć, co ma robić, zanim skoncentruje się na polu. Zrób to prawidłowo: label widoczny lub ukryty (z class=”sr-only”), zawsze połączony z input.
To zajmuje 5 minut na formularz. Warto.
Szybki checklist dla czytników ekranu
Nagłówki
H1 H2 H3. Logiczna hierarchia. Bez przeskoków. Każdy h1 to nowy dokument.
Obrazy
Alt text dla każdego obrazu. Krótki i opisowy. Nie “image123.jpg”, ale “Diagram przedstawiający…”.
Nawigacja
Tab, Enter, Spacja. Wszystko powinno działać bez myszy. Skip links dla przeskoku do main content.
Linki
Tekst linku musi być opisowy. Nie “kliknij tutaj”, ale “Przeczytaj o dostępności”.
Znaczniki
Użyj
<button>
, nie
<div class="button">
. Semantyka ma znaczenie.
Kontrast
4.5:1 dla tekstu zwykłego. 3:1 dla tekstu dużego. To też pomaga osobom z niskim widzeniem.
Testowanie — jak to zrobić sam
Nie czekaj na audyt. Testuj sam. Na Windows pobierz NVDA (darmowy, open-source). Na Mac jest VoiceOver wbudowany — Cmd+F5. Na Linuxie jest Orca. Zainstaluj, włącz i… słuchaj. To wymaga przyzwyczajenia, ale po kilku minutach zrozumiesz, co czytnik mówi o twojej stronie.
Szybka ścieżka: włącz NVDA, wciśnij Insert+F7 (list elementów), zobacz wszystkie nagłówki. Czy twoja struktura ma sens? Czy h2 nie przeskakuje do h4? Czy każdy obrazek ma alt text?
To nie jest trudne, ale wymaga zaangażowania
Projektowanie dla czytników ekranu to nie dodatkowa funkcja. To fundamentalne podejście do kodu. Semantyczny HTML, logiczne nagłówki, jasne etykiety, prawidłowe ARIA — to podstawy, które powinny być automatyczne dla każdego developerów.
Ustawa o dostępności cyfrowej (2024) mówi jasno: strony publiczne i duże e-commerce muszą być dostępne. Ale czemu czekać na wymóg prawny? Jeśli twoja strona nie działa dla osób korzystających z czytników ekranu, tracisz część publiczności. I tracisz szansę na bycie dobrym programistą.
Zacznij dzisiaj. Sprawdź jeden formularz. Dodaj alt text do obrazów. Napraw jeden nagłówek. Malutkie kroki prowadzą do dostępnych stron.
Chcesz wiedzieć więcej?
Sprawdź pozostałe artykuły o dostępności cyfrowej. Dowiedz się o WCAG 2.1, nawigacji klawiaturą i wymogach ustawy o dostępności.
Wróć do kategorii
Zastrzeżenie
Ten artykuł zawiera informacje edukacyjne na temat dostępności cyfrowej i czytników ekranu. Nie jest to porada prawna ani profesjonalna konsultacja. Każda sytuacja jest inna — dokładnie zapoznaj się z wymogami WCAG 2.1 i lokalną legislacją, zanim wdrażasz zmiany na swojej stronie. W razie wątpliwości skonsultuj się ze specjalistą od dostępności lub prawnikiem zajmującym się technologią.