Najczęstsze błędy dostępności w sklepach internetowych
· 5 min czytania
Najczęstsze błędy dostępności w sklepach internetowych to zbyt słaby kontrast tekstu, zdjęcia produktów bez opisów, pola formularza zamówienia bez etykiet, przyciski bez nazwy, problemy z obsługą klawiaturą i zbyt małe elementy dotykowe. Większość z nich da się poprawić w motywie sklepu bez przebudowy całej strony. Poniżej opisujemy typowe problemy, sposób ich naprawy w Shopify i WooCommerce oraz to, co wykryje automat, a co trzeba sprawdzić ręcznie.
Lista opiera się na kategoriach reguł biblioteki axe-core i kryteriach WCAG 2.2 AA. Nie podajemy rankingów ani odsetków – kolejność nie oznacza częstotliwości.
1. Zbyt niski kontrast tekstu
Problem: jasnoszary tekst na białym tle, cena na kolorowym banerze, napis na zdjęciu. WCAG wymaga kontrastu co najmniej 4,5:1 dla zwykłego tekstu (kryterium 1.4.3).
Jak poprawić: w Shopify – w edytorze motywu w ustawieniach kolorów; w WooCommerce – w ustawieniach motywu lub w arkuszu CSS motywu potomnego. Warto zmienić kolory w jednym miejscu (paleta motywu), a nie na każdej stronie osobno.
Automat: wykrywa większość przypadków tekstu na jednolitym tle. Tekstu na zdjęciach i gradientach często nie oceni jednoznacznie.
2. Zdjęcia produktów bez tekstu alternatywnego
Problem: czytnik ekranu odczytuje nazwę pliku albo nic. Klient niewidomy nie wie, co przedstawia zdjęcie.
Jak poprawić: w Shopify – pole „tekst alternatywny” przy każdym zdjęciu produktu; w WooCommerce – pole „Tekst alternatywny” w bibliotece mediów. Zdjęcia czysto dekoracyjne powinny mieć pusty atrybut alt.
Automat: wykrywa brak atrybutu. Nie oceni, czy opis jest trafny – to sprawdzenie ręczne.
3. Pola formularza bez etykiet (koszyk i zamówienie)
Problem: pola „Imię”, „Kod pocztowy” czy „Kod rabatowy” mają tylko placeholder, który znika po kliknięciu, albo nie mają żadnej etykiety powiązanej z polem. To szczególnie bolesne w formularzu zamówienia.
Jak poprawić: każde pole potrzebuje elementu label powiązanego z polem. W WooCommerce problem często pojawia się we wtyczkach do zamówienia i newslettera; w Shopify – w sekcjach motywu (np. formularz newslettera, wyszukiwarka).
Automat: wykrywa brak etykiety. Nie oceni, czy komunikaty o błędach są zrozumiałe.
4. Przyciski i linki bez nazwy
Problem: ikony koszyka, lupy, serduszka „ulubione” czy strzałki karuzeli nie mają tekstu. Czytnik ekranu odczyta „przycisk” lub „link” bez informacji, do czego służy.
Jak poprawić: dodać ukryty tekst lub atrybut aria-label w szablonie motywu (Liquid w Shopify, szablony PHP w WooCommerce). Linki typu „Czytaj więcej” warto uzupełnić o nazwę produktu lub artykułu.
Automat: wykrywa przyciski i linki bez nazwy. Nie oceni, czy nazwa jest zrozumiała.
5. Nieuporządkowana struktura nagłówków
Problem: brak nagłówka H1, przeskoki poziomów, nagłówki używane tylko dla wielkości czcionki. Osoby korzystające z czytników ekranu nawigują po nagłówkach, więc chaos utrudnia orientację.
Jak poprawić: jeden H1 na stronie (np. nazwa produktu), sekcje jako H2, podsekcje jako H3. W motywach Shopify i WooCommerce poziom nagłówka zwykle ustawia się w szablonie sekcji.
Automat: wykrywa część problemów (np. pusty nagłówek, brak H1). Logiczność struktury wymaga oceny człowieka.
6. Obsługa klawiaturą i widoczny fokus
Problem: menu rozwijane otwiera się tylko po najechaniu myszą, okno „szybki podgląd” nie daje się zamknąć klawiszem Esc, a obramowanie fokusu zostało usunięte w CSS. Osoba korzystająca z klawiatury gubi się albo nie może dokończyć zakupu.
Jak poprawić: przywrócić widoczny styl fokusu, zapewnić obsługę menu klawiszami Tab, Enter i Esc, sprawdzić okna modalne. Kryteria WCAG 2.2 dodają wymóg, by element z fokusem nie był zasłonięty, np. przez przyklejony nagłówek (2.4.11).
Automat: wykrywa tylko pojedyncze sygnały. Całą ścieżkę zakupu trzeba przejść ręcznie samą klawiaturą.
7. Zbyt małe elementy dotykowe
Problem: małe ikony, przyciski „+/−” przy ilości, kropki karuzeli. WCAG 2.2 wprowadził kryterium 2.5.8: obszar docelowy co najmniej 24 × 24 piksele CSS lub odpowiedni odstęp.
Jak poprawić: zwiększyć obszar klikalny w CSS (padding), nie samą ikonę. Szczególnie ważne na telefonach.
Automat: axe-core sprawdza to kryterium, ale nie we wszystkich układach ocena jest jednoznaczna.
8. Brak atrybutu języka strony
Problem: brak lang="pl" w znaczniku html. Czytnik ekranu może czytać polski tekst z wymową angielską.
Jak poprawić: w Shopify język ustawia się w ustawieniach sklepu i motywu; w WooCommerce – w ustawieniach WordPressa. W sklepach wielojęzycznych każda wersja powinna mieć właściwy atrybut.
Automat: wykrywa brak lub nieprawidłowy atrybut.
9. Karuzele przewijające się automatycznie
Problem: baner na stronie głównej zmienia slajdy co kilka sekund, bez przycisku pauzy. Utrudnia to czytanie osobom z trudnościami poznawczymi i użytkownikom czytników ekranu (kryterium 2.2.2).
Jak poprawić: wyłączyć automatyczne przewijanie w ustawieniach sekcji albo dodać widoczny przycisk pauzy.
Automat: zwykle tego nie wykryje – potrzebna kontrola ręczna.
10. Baner cookies, który blokuje nawigację
Problem: baner zgody na cookies przejmuje fokus i nie pozwala z niego wyjść albo, odwrotnie, jest niedostępny z klawiatury i zasłania treść. Czasem przyciski mają zbyt słaby kontrast.
Jak poprawić: sprawdzić ustawienia narzędzia do zgód, wybrać wersję obsługującą klawiaturę, poprawić kontrast przycisków.
Automat: wykryje kontrast i brak nazw przycisków. Pułapkę fokusu trzeba sprawdzić ręcznie.
Co wykryje automat, a co wymaga człowieka
| Kategoria | Automatyczna kontrola | Sprawdzenie ręczne |
|---|---|---|
| Kontrast | tak (tło jednolite) | tekst na zdjęciach |
| Tekst alternatywny | brak atrybutu | sensowność opisu |
| Etykiety pól | tak | zrozumiałość błędów |
| Nazwy przycisków i linków | tak | zrozumiałość nazwy |
| Nagłówki | częściowo | logiczna struktura |
| Klawiatura i fokus | pojedyncze sygnały | cała ścieżka zakupu |
| Rozmiar elementów (2.5.8) | tak, z ograniczeniami | nietypowe układy |
| Atrybut języka | tak | – |
| Karuzele | rzadko | tak |
| Baner cookies | kontrast, nazwy | pułapka fokusu |
Szerszą listę kryteriów znajdą Państwo w artykule WCAG 2.2 – lista kontrolna dla sklepów, a objaśnienia pojęć w słowniku.
Dlaczego warto poprawiać w kodzie, a nie widżetem
Wszystkie opisane problemy leżą w kodzie motywu i w treściach sklepu. Widżet nakładkowy nie zmienia kodu źródłowego, więc ich nie usuwa – więcej w artykule Nakładki dostępności.
Jak sprawdzić własny sklep
Nasz serwis skanuje strony sklepu, grupuje wyniki według kryteriów WCAG i EN 301 549, nadaje priorytety i podaje wskazówki dla Shopify, WooCommerce i innych platform. Co tydzień sprawdza stronę ponownie i informuje o nowych błędach. To automatyczna kontrola, a nie pełny audyt – ręczne sprawdzenia z tabeli powyżej nadal są potrzebne. Raport nie stanowi porady prawnej.
Jeśli Państwa sklep jest objęty ustawą o dostępności, kontekst prawny opisujemy w artykule Dostępność sklepu internetowego a EAA. Na start proszę skorzystać z bezpłatnej kontroli jednej strony.
Najczęstsze pytania
Które błędy dostępności wykryje automatyczny skaner?
Między innymi zbyt niski kontrast, brak tekstu alternatywnego, pola bez etykiet, przyciski i linki bez nazwy, brak atrybutu języka oraz część problemów ze strukturą nagłówków.
Czego skaner nie sprawdzi?
Czy opis zdjęcia jest sensowny, czy cały proces zakupu da się przejść klawiaturą, czy fokus jest widoczny i logiczny oraz czy baner cookies nie blokuje nawigacji. To wymaga sprawdzenia ręcznego.
Czy błędy trzeba poprawiać w motywie sklepu?
Tak, najtrwalsze są poprawki w motywie, szablonach i ustawieniach treści. Widżety nakładkowe nie zmieniają kodu strony.
Źródła
- Web Content Accessibility Guidelines (WCAG) 2.2 – W3C