Najczęstsze błędy WCAG i jak je naprawić
Sześć błędów odpowiada za większość barier w sieci. W raporcie WebAIM Million 2026 niski kontrast tekstu był na 83,9% z miliona najpopularniejszych stron głównych, a obrazki bez opisu na 53,1%. Poniżej opisujemy te błędy i kilka kolejnych, które wykrywa skaner Dostepli: co je powoduje, jak wygląda poprawka w kodzie i jak sprawdzić ją samodzielnie w dwie minuty.
Lista błędów
WCAG 1.4.3 (AA)
Niski kontrast tekstu
Zwykły tekst potrzebuje kontrastu co najmniej 4,5:1, duży 3:1. Zobacz, jak zmierzyć kontrast, które kolory najczęściej zawodzą i jak je poprawić w sklepie.
Jak to naprawićWCAG 1.1.1 (A)
Brak tekstu alternatywnego
Obrazek bez atrybutu alt jest dla czytnika ekranu pustym miejscem albo nazwą pliku. Zobacz, jak pisać alt do zdjęć produktów, ikon i grafik ozdobnych.
Jak to naprawićWCAG 1.3.1 (A) · WCAG 3.3.2 (A) · WCAG 4.1.2 (A)
Pole formularza bez etykiety
Pole bez etykiety czytnik ekranu odczyta jako „pole edycji" bez nazwy. Zobacz, jak poprawnie powiązać label z polem w formularzu zamówienia i newslettera.
Jak to naprawićWCAG 2.4.4 (A) · WCAG 4.1.2 (A)
Link bez nazwy
Pusty link albo dziesięć linków „czytaj więcej" to dla czytnika ekranu zagadka. Zobacz, jak nazywać linki z ikonami i linki w kafelkach produktów.
Jak to naprawićWCAG 4.1.2 (A)
Przycisk bez nazwy
Przycisk z samą ikoną czytnik odczyta jako „przycisk" bez celu. Zobacz, jak nazwać ikony koszyka, menu i zamykania okna, żeby było wiadomo, co robią.
Jak to naprawićWCAG 3.1.1 (A)
Brak języka strony
Bez atrybutu lang czytnik ekranu czyta polski tekst z angielskim akcentem i robi z niego bełkot. Zobacz, jak ustawić lang="pl" i języki cytatów.
Jak to naprawićWCAG 2.4.7 (AA) · WCAG 2.4.11 (AA)
Niewidoczny fokus
outline: none bez zamiennika sprawia, że z klawiatury nie widać aktywnego elementu. Zobacz, jak dodać wyraźny styl :focus-visible i sprawdzić to w minutę.
Jak to naprawićWCAG 2.1.2 (A)
Pułapka klawiatury
Czat, okno albo osadzony widżet może uwięzić fokus klawiatury. Zobacz, jak rozpoznać pułapkę, kiedy okno modalne jest w porządku i jak to naprawić.
Jak to naprawićWCAG 1.4.10 (AA)
Przewijanie w bok (reflow)
Przy szerokości 320 px treść nie może wymagać przewijania w bok. Zobacz, które elementy sklepu najczęściej wystają poza ekran i jak to naprawić w CSS.
Jak to naprawićWCAG 2.5.8 (AA)
Za mały obszar kliknięcia
WCAG 2.2 wymaga, żeby przyciski i linki miały co najmniej 24 x 24 px albo odstęp od sąsiednich. Zobacz, jak powiększyć cel bez zmiany wyglądu.
Jak to naprawić