Seviranta10 najczęstszych błędów dostępności w sklepach internetowych (i jak je naprawić)
4 czerwca 2026
Krótka odpowiedź. Większość sklepów internetowych nie oblewa na setkach różnych rzeczy, tylko na tej samej garści błędów: zbyt niski kontrast kolorów, brakujące teksty alternatywne, przyciski i linki bez nazwy, pola bez etykiety, chaotyczna struktura nagłówków i kulejąca obsługa klawiaturą. Dobra wiadomość: właśnie dlatego da się to naprawić — często na poziomie całego motywu, więc jedna poprawka od razu obejmuje setki stron.
Z badania WebAIM Million wynika, że ~96% stron głównych ma mierzalne błędy WCAG — i koncentrują się one na poniższej dziesiątce. Chcesz wiedzieć, które z nich ma Twoja strona? Na dole zeskanujesz bezpłatnie jedną stronę.
1. Zbyt niski kontrast kolorów
Zdecydowanie najczęstszy błąd. Jasnoszary tekst na białym tle albo kolor przycisku, który jest odrobinę za blady, jest nieczytelny dla osób słabowidzących i dla każdego, kto patrzy na telefon w ostrym słońcu. Norma wymaga współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu (3:1 dla dużego tekstu).
Rozwiązanie: przyciemnij lub rozjaśnij kolor tekstu albo tła, aż współczynnik będzie się zgadzał. W Shopify zmieniasz to raz w ustawieniach motywu → kolory i od razu obowiązuje to w całym sklepie. Więcej na ten temat w artykule kontrast kolorów: wymóg WCAG i jak go mierzyć.
2. Obrazy bez tekstu alternatywnego
Zdjęcie produktu bez tekstu alternatywnego jest niewidoczne dla czytnika ekranu — niewidomy klient nie wie wtedy, co to za produkt. To uderza bezpośrednio w Twoją sprzedaż.
Rozwiązanie: nadaj każdemu informacyjnemu obrazowi krótki tekst alternatywny,
który opisuje, co na nim jest. W Shopify: produkt → multimedia → „edytuj tekst
alternatywny". Obrazy czysto dekoracyjne dostają pusty alt (alt=""). Zobacz
jak pisać teksty alternatywne, które działają.
3. Przyciski bez nazwy
Przycisk, który pokazuje tylko ikonę (koszyk, lupa, menu), jest odczytywany przez czytnik ekranu jako „przycisk" — bez informacji, co właściwie robi.
Rozwiązanie: dodaj przyciskowi tekst albo aria-label opisujący akcję, na
przykład aria-label="Dodaj do koszyka".
4. Linki bez czytelnego tekstu
Tak samo jak z przyciskami: link składający się wyłącznie z ikony albo linki „czytaj więcej" bez kontekstu nie mówią użytkownikowi czytnika ekranu, dokąd prowadzą.
Rozwiązanie: nadaj linkowi widoczny, opisowy tekst albo aria-label („Zobacz
koszyk" zamiast samej ikony koszyka).
5. Pola formularzy bez etykiety
Pola wyszukiwania, logowania i zamówienia bez powiązanej etykiety są trudne lub niemożliwe do obsłużenia technologią wspomagającą. Właśnie przy finalizacji zakupu kosztuje Cię to klientów.
Rozwiązanie: powiąż widoczny <label> z każdym polem formularza (przez
for/id) albo użyj aria-label, jeśli nie ma miejsca na widoczny tekst.
6. Chaotyczna struktura nagłówków
Użytkownicy czytników ekranu nawigują po nagłówkach — tak jak Ty po spisie treści. Jeśli skaczesz z H1 do H4 albo używasz nagłówków tylko do stylizacji, ta struktura się rozpada.
Rozwiązanie: używaj nagłówków w logicznej kolejności (H1 → H2 → H3), a wygląd ustawiaj w CSS, nie poziomem nagłówka.
7. Brak atrybutu języka
Bez atrybutu języka czytnik ekranu nie wie, czy Twoja strona jest po polsku, czy po angielsku, i czyta wszystko z niewłaściwą wymową.
Rozwiązanie: ustaw lang="pl" (lub właściwy język) na elemencie <html>. W
Shopify znajdziesz to w theme.liquid — zwykle już jest, ale czasem puste.
8. Brak obsługi klawiaturą
Wiele osób nie używa myszy. Jeśli menu, slider albo wyskakujące okno działa tylko myszą, albo nie widać, gdzie znajduje się fokus, wykluczasz tych odwiedzających.
Rozwiązanie: zadbaj, by wszystko było osiągalne klawiszem Tab, by była widoczna ramka fokusa i by wyskakujące okna nie „więziły" fokusa.
9. Źle użyte ARIA
Atrybuty ARIA mogą pomagać technologii wspomagającej — ale użyte błędnie lub nieprawidłowo wręcz szkodzą. Często wkradają się przez zainstalowane aplikacje lub elementy motywu.
Rozwiązanie: używaj ARIA tylko tam, gdzie to konieczne, i z poprawnymi wartościami. Jeśli pochodzi z aplikacji lub motywu, sprawdź ten konkretny element.
10. Brak czytelnego tytułu strony
Strona bez unikalnego <title> nie pokazuje rozpoznawalnej nazwy w karcie
przeglądarki ani w czytniku ekranu — nawigacja między kartami staje się
zgadywanką.
Rozwiązanie: nadaj każdej stronie unikalny, opisowy tytuł. Shopify zwykle uzupełnia to automatycznie; sprawdź swoje niestandardowe szablony.
Jaki jest najczęstszy błąd dostępności?
Zbyt niski kontrast kolorów to zdecydowanie najczęstszy błąd — z dużą przewagą zajmuje pierwsze miejsce w niemal każdym badaniu na dużą skalę, bo niepostrzeżenie wkrada się w kolory motywu, teksty przycisków i etykiety cen. Jednocześnie jest jednym z najłatwiejszych do naprawienia: raz ustawiasz dobrze kolory motywu i obowiązuje to w całym sklepie.
Czy da się te błędy naprawić za jednym razem?
Często tak. Ponieważ sklep internetowy działa na szablonach, ten sam błąd występuje zwykle na setkach stron jednocześnie — i da się go naprawić na poziomie całego motywu. Jedna zmiana w motywie (kolory, nagłówki, etykiety) pokrywa wtedy za jednym zamachem cały sklep.
Czy darmowy skan wyłapie wszystkie te błędy?
Zautomatyzowany skan wykrywa maszynowo i wiarygodnie około 57% problemów; reszta wymaga ludzkiej oceny. Te 57% obejmuje właśnie błędy powyżej — kontrast, teksty alternatywne, etykiety, przyciski, nagłówki — więc skan od razu pokazuje lwią część, razem z gotową poprawką.
Ciekawi Cię, które z tej dziesiątki są na Twojej stronie? Wklej adres URL i zeskanuj bezpłatnie jedną stronę na pełnej głębokości — bez konta, w mniej niż 60 sekund.