Dostępność stron internetowych: praktyczny przewodnik
Dostępność to różnica między stroną, z której każdy może skorzystać, a stroną, która wyklucza część odwiedzających, nie dając nikomu o tym znać. Większość wymagań jest prosta i tania, jeśli zajmiesz się nimi w trakcie budowy.
Ten przewodnik obejmuje, co sprawdzić, jak testować bez drogich narzędzi i co jest obowiązkiem prawnym, a nie dobrą praktyką.
Podstawy według wpływu#
Spełnienie tych punktów usuwa większość realnych barier, a żaden nie jest drogi w trakcie budowy.
- Semantyczny HTML. Nagłówki, listy, przyciski i linki z właściwymi znacznikami — to podstawa wszystkiego.
- Obsługa klawiaturą. Wszystko, co da się zrobić myszą, musi być możliwe z Tab i Enter.
- Widoczne wskazanie fokusu. Nigdy nie usuwaj obrysu bez lepszego zamiennika.
- Wystarczający kontrast. 4,5:1 dla zwykłego tekstu, 3:1 dla dużego.
- Tekst alternatywny obrazów. Opisowy przy informacyjnych, pusty przy dekoracyjnych.
- Etykiety w formularzach. Powiązane z polem, nie sam tekst zastępczy.
- Czytelne błędy. Przy polu, mówiące, co poprawić, a nie tylko na czerwono.
- Nie przekazuj informacji samym kolorem.
- Napisy w filmach, a transkrypcja w audio.
Semantyczny HTML sam z siebie rozwiązuje ogromną część problemów. Przycisk będący <div> od razu zawodzi przy klawiaturze i czytnikach ekranu.
Testowanie bez drogich narzędzi#
Pięć testów, które każdy może wykonać i które wyłapują większość problemów.
| Test | Jak wykonać | Co ujawnia |
|---|---|---|
| Sama klawiatura | Odłóż mysz i nawiguj Tabem | Pułapki fokusu, elementy niedostępne |
| Powiększenie do 200 % | Powiększ w przeglądarce | Psujący się układ, ucięty tekst |
| Automatyczny audyt | Darmowe rozszerzenie do dostępności | Kontrast, etykiety, struktura |
| Czytnik ekranu | Ten wbudowany w system | Czy strona ma sens odczytana |
| Skala szarości | Filtr systemowy | Informacja przekazywana samym kolorem |
Narzędzia automatyczne wyłapują około jednej trzeciej problemów. Test klawiaturą wyłapuje wiele z reszty i trwa dwie minuty.
Częste błędy#
Wzorce pojawiające się wielokrotnie i łatwe do uniknięcia.
- Usuwanie obrysu fokusu z powodów estetycznych — czyni stronę bezużyteczną z klawiaturą.
- Użycie <div> z obsługą kliknięcia zamiast <button>, co odbiera klawiaturę i semantykę.
- Tekst zastępczy zamiast etykiety: znika, gdy zaczynasz pisać.
- Niski kontrast w tekście drugorzędnym, bardzo częsty przy jasnych szarościach.
- Obrazy z wtopionym tekstem, nieczytelne dla czytników i dla tłumaczenia.
- Automatyczne karuzele bez możliwości zatrzymania.
- Modale niezwracające fokusu do elementu, który je otworzył.
- Ikony bez dostępnej etykiety, zwłaszcza w menu i przyciskach zamykania.
Obowiązek prawny i zakres#
Ramy różnią się w zależności od kraju i typu organizacji, ale kierunek jest wszędzie ten sam.
| Kontekst | Sytuacja |
|---|---|
| Sektor publiczny w Unii Europejskiej | Obowiązkowe, z deklaracją dostępności |
| Usługi cyfrowe i handel | Coraz szerzej objęte prawem europejskim |
| Firmy dostarczające dla państwa | Często wymagane w przetargach |
| Norma odniesienia | WCAG 2.1 poziom AA |
| Strony prywatne bez umów publicznych | Dobra praktyka, z rosnącym ryzykiem prawnym |
| Aplikacje mobilne | Objęte tymi samymi wytycznymi |
Niezależnie od obowiązku prawnego argument praktyczny jest prosty: znaczna część populacji ma jakieś ograniczenie, a ograniczenia czasowe dotykają w pewnym momencie każdego.
Najczęstsze pytania
Czy dostępność podnosi koszt projektu?
W trakcie budowy niewiele — większość to pisanie poprawnego HTML i dobór kolorów o wystarczającym kontraście. Poprawianie gotowej strony kosztuje znacznie więcej, bo wymaga ruszania już zbudowanej struktury. Dlatego powinno to być w wymaganiach, a nie w audycie po fakcie.
Czy narzędzia automatyczne wystarczą?
Nie. Wyłapują około jednej trzeciej problemów: kontrast, brakujące etykiety, strukturę nagłówków. Nie ocenią, czy tekst alternatywny jest użyteczny, czy kolejność tabulacji ma sens, ani czy strona jest zrozumiała odczytana. Łącz automat z testem klawiaturą i czytnikiem ekranu.
Czy dostępność pomaga w SEO?
Pomaga, bo faktycznie się pokrywają: semantyczny HTML, dobrze zbudowane nagłówki, tekst alternatywny i napisy służą obu celom. To nie jest taktyka SEO, ale obie rzeczy ciągną w tym samym kierunku, bo obie zależą od tego, by treść była zrozumiała niezależnie od warstwy wizualnej.
Czy potrzebuję pełnej zgodności?
Jeśli masz obowiązek prawny — tak, na wymaganym poziomie. Poza tym pracuj priorytetami: napraw najpierw to, co blokuje korzystanie — klawiatura, kontrast, etykiety, formularze — a subtelniejsze punkty potem. Strona z rozwiązanymi podstawami jest używalna; pełna formalna zgodność to kolejny krok.
dostępność stronwcagstrona dostępnanawigacja klawiaturąkontrast dostępnośćczytnik ekranu
