1. Nagłówki używane jako „duży tekst”
Nagłówki niosą strukturę, nie wygląd. Jeśli h3 pojawia się bez
h2, czytnik ekranu gubi kontekst. Ustal jedną hierarchię i trzymaj
się jej konsekwentnie.
2. Ukryty albo usunięty fokus
outline: none bez zamiennika sprawia, że osoba nawigująca
klawiaturą nie wie, gdzie jest. Zostaw widoczny fokus — najlepiej 3–4 px
z odstępem.
3. Zbyt niski kontrast
Szary tekst na białym tle często nie osiąga 4.5:1. Sprawdzaj kontrast w trakcie projektowania, nie po wdrożeniu.
4. Obrazy bez alternatywy
Obraz dekoracyjny powinien mieć alt="", a obraz znaczący —
krótki opis funkcji. Nie wklejaj do alt całego akapitu.
5. Linki „kliknij tutaj”
Tekst linku musi mieć sens poza kontekstem. „Pobierz wniosek o dowód” jest lepsze niż „kliknij tutaj”.
6. Formularze bez etykiet
Placeholder nie zastępuje etykiety. Powiąż label z polem przez
for/id i opisuj błędy tekstem.
7. Tabele układu zamiast danych
Do układu używaj CSS. Tabelę zostaw do danych i dodaj caption
oraz nagłówki th z zakresem.
Wniosek
Semantyczny HTML rozwiązuje większość tych problemów u źródła. To tańsze niż łatanie dostępności po fakcie — i działa dla wszystkich użytkowników.