Czy mój sklep internetowy musi być dostępny dla osób z niepełnosprawnościami?

W skrócie

• Kogo dotyczy: sklepów internetowych sprzedających konsumentom, od 28 czerwca 2025 roku. Podstawą jest ustawa o zapewnianiu spełniania wymagań dostępności przez niektóre produkty i usługi (Dz.U. 2024 poz. 731).
• Kto jest zwolniony: mikroprzedsiębiorcy, czyli firmy z mniej niż 10 pracownikami i rocznym obrotem do 2 mln euro, w zakresie świadczonej usługi. Zwolnienie nie obejmuje obowiązków związanych ze sprzedawanymi produktami, na przykład elektroniką.
• Co trzeba zrobić: sklep ma być możliwy do obsłużenia przez osoby niewidome, słabowidzące, z ograniczeniami ruchowymi czy poznawczymi. W praktyce wzorcem jest WCAG 2.1 na poziomie AA.
• Dobra wiadomość: większość poprawek pomaga wszystkim klientom, nie tylko osobom z niepełnosprawnościami. Czytelniejszy sklep zwykle lepiej sprzedaje.

To nie jest porada prawna. Jeśli nie masz pewności, czy ustawa Cię obejmuje, zapytaj prawnika albo sprawdź aktualne stanowisko ministerstwa odpowiedzialnego za cyfryzację.

Jak sprawdzić swój sklep w 15 minut

1. Odłóż myszkę. Przejdź od strony głównej do płatności samym klawiszem Tab. Czy zawsze widzisz, gdzie jesteś? Czy da się otworzyć menu, wybrać wariant i dodać produkt do koszyka?
2. Powiększ stronę do 200%. Czy treść się mieści, czy coś nachodzi na siebie albo znika?
3. Sprawdź kontrast. Szary tekst na białym tle i biały tekst na zdjęciach to najczęstsze błędy. Tekst powinien mieć kontrast co najmniej 4,5:1.
4. Uruchom automatyczny test. Lighthouse w przeglądarce Chrome (zakładka Accessibility) albo darmowe narzędzie WAVE pokażą brakujące opisy, etykiety i błędy kontrastu.
5. Włącz czytnik ekranu. VoiceOver na Macu i iPhonie albo TalkBack na Androidzie. Posłuchaj, jak brzmi karta produktu i formularz w kasie.

Najczęstsze problemy i jak je naprawić

Zdjęcia bez opisu

Każde zdjęcie produktu potrzebuje tekstu alternatywnego, który mówi, co na nim jest. Zdjęcia czysto dekoracyjne dostają pusty opis, żeby czytnik je pominął.

<img src="kawa-honduras.webp" alt="Paczka kawy Honduras 250 g, ziarnista">
<img src="dekoracja.svg" alt="">

W Shopify opis zdjęcia ustawisz w panelu, w edycji produktu, klikając zdjęcie i pole „Tekst alternatywny”.

Pola bez etykiet

Placeholder znika, gdy klient zaczyna pisać, i nie jest czytany przez wszystkie czytniki. Każde pole potrzebuje widocznej etykiety powiązanej z polem.

<label for="email">Adres e-mail</label>
<input id="email" type="email" autocomplete="email" required>

Atrybut autocomplete przy okazji pozwala przeglądarce podpowiedzieć dane, co przyspiesza zakupy wszystkim.

Komunikaty błędów, które nic nie mówią

Czerwona ramka to za mało. Komunikat ma powiedzieć, co jest źle i jak to poprawić, a czytnik ekranu ma go przeczytać:

<input id="email" aria-describedby="email-blad" aria-invalid="true">
<p id="email-blad" role="alert">Wpisz pełny adres e-mail, np. jan@firma.pl</p>

Niewidoczny fokus

Wiele motywów usuwa obwódkę zaznaczenia, bo „brzydko wygląda”. Bez niej osoba korzystająca z klawiatury nie wie, gdzie jest. Zamiast ją usuwać, zaprojektuj ją:

:focus-visible {
  outline: 2px solid #3D8EF7;
  outline-offset: 3px;
}

Informacja przekazana tylko kolorem

Wariant „niedostępny” oznaczony tylko szarym kolorem, błąd oznaczony tylko czerwienią, link odróżniony tylko kolorem. Dodaj tekst, ikonę albo podkreślenie.

Elementy, które się ruszają

Automatyczne karuzele i animacje powinny mieć możliwość zatrzymania, a przy ustawieniu systemowym „ogranicz ruch” warto je wyłączyć:

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Informacja o dostępności na stronie

Oprócz poprawek technicznych sklep objęty ustawą powinien udostępnić informację o tym, jak usługa spełnia wymagania dostępności. Najprościej przygotować osobną podstronę, opisać na niej, co zostało zrobione, i podać kontakt dla osób, które napotkają problem.