Za każdym razem, gdy klient z niepełnosprawnością nie może przejść przez zamówienie, użyć filtra produktów ani przeczytać opisów, tracisz sprzedaż. Ponad jedna na cztery dorosłe osoby w USA ma jakąś formę niepełnosprawności. To nie jest mały segment rynku. To Twój rynek.
Dostępność strony to nie tylko kwestia etyczna. To wymóg prawny. Ustawa Americans with Disabilities Act (ADA) wymaga, by firmy udostępniały swoje usługi osobom z niepełnosprawnościami. Dotyczy to także sklepów internetowych. Tysiące stron co roku otrzymuje pisma z żądaniami z powodu naruszeń dostępności, a sklepy internetowe są celem najczęściej. Ten artykuł wyjaśnia, czym jest dostępność, dlaczego ma znaczenie dla Twojego sklepu, czego wymaga prawo i jak ją wdrożyć bez drogich, wyspecjalizowanych narzędzi.
Czym jest dostępność strony internetowej?
Dostępność strony oznacza, że może z niej korzystać każdy, także osoby z niepełnosprawnościami. Dotyczy to osób niewidomych lub słabowidzących, niesłyszących lub słabosłyszących, z zaburzeniami motorycznymi utrudniającymi używanie myszy, z trudnościami poznawczymi lub w uczeniu się oraz z innymi schorzeniami wpływającymi na korzystanie z internetu.
Dostępne strony działają z technologiami wspomagającymi, takimi jak czytniki ekranu (oprogramowanie czytające tekst na głos), nawigacja wyłącznie klawiaturą (dla osób, które nie mogą używać myszy) i narzędzia powiększające. Dostępna strona używa też jasnego języka, odpowiedniego kontrastu kolorów, poprawnej struktury nagłówków i etykiet formularzy zrozumiałych dla czytników ekranu.
Kluczowa zasada: klienci powinni móc zrobić to, po co przyszli. Powinni móc przeglądać, filtrować, czytać opisy, dodawać do koszyka i finalizować zamówienie, niezależnie od technologii wspomagających lub dostosowań, z których korzystają.
Czym jest ADA i dlaczego dotyczy Twojego sklepu?
Ustawa ADA, uchwalona w 1990 roku, to amerykańskie prawo federalne zakazujące dyskryminacji osób z niepełnosprawnościami. Tytuł III ustawy wymaga, by wszystkie firmy otwarte dla publiczności zapewniały równy dostęp osobom z niepełnosprawnościami. Obejmuje to strony internetowe i usługi online. Prawo nie przewiduje wyjątków dla małych firm ani sprzedawców internetowych.
Twój sklep internetowy jest w rozumieniu ADA miejscem publicznie dostępnym. Oznacza to, że Twoja strona musi być dostępna. Nie możesz argumentować, że sklep jest za mały, za nowy albo że dostępność jest zbyt droga. Prawo obowiązuje. Sądy konsekwentnie orzekają, że ADA dotyczy stron internetowych, a Departament Sprawiedliwości USA stwierdził, że dostępność stron to kwestia praw obywatelskich, a nie opcja.
WCAG 2.1 poziom AA: standard dostępności
Standard dostępności stron używany w sprawach sądowych i wymogach zgodności nazywa się WCAG (Web Content Accessibility Guidelines) 2.1 poziom AA. WCAG utrzymuje World Wide Web Consortium (W3C), organizacja non-profit ustalająca standardy internetu.
WCAG 2.1 poziom AA obejmuje wytyczne w czterech głównych obszarach:
Postrzegalność: użytkownicy widzą lub słyszą Twoje treści
Treści muszą być przedstawione w sposób, który klienci mogą odebrać. Oznacza to teksty alternatywne (alt) dla wszystkich zdjęć produktów, napisy do filmów, wystarczający kontrast tekstu i przycisków (minimum 4,5:1 dla standardowego tekstu) oraz unikanie treści migających częściej niż 3 razy na sekundę, które mogą wywołać napady padaczkowe.
Funkcjonalność: użytkownicy mogą poruszać się po sklepie i korzystać z niego
Użytkownicy muszą móc poruszać się po sklepie wyłącznie klawiaturą (bez myszy). Linki i przyciski muszą być dostępne z klawiatury. Formularze muszą mieć jasne etykiety zrozumiałe dla czytników ekranu. Sklep nie powinien zatrzymywać użytkowników klawiatury w nieskończonych pętlach ani wymagać działań w ograniczonym czasie, którego nie da się dostosować. Elementy menu i pola formularzy muszą być łatwe do znalezienia i użycia.
Zrozumiałość: użytkownicy rozumieją, co sklep mówi i robi
Sklep musi być łatwy do zrozumienia. Używaj jasnego języka i krótkich zdań. Wyjaśniaj żargon przy pierwszym użyciu. Porządkuj strony logicznie, z poprawną strukturą nagłówków (jeden H1 na stronę, potem H2 i H3 po kolei). Jasno wyjaśniaj błędy walidacji formularzy. Zadbaj o spójność strony, by użytkownicy mogli przewidzieć, jak działają nawigacja i interakcje.
Solidność: sklep działa z technologiami wspomagającymi
Kod musi być napisany poprawnie, by czytniki ekranu i inne narzędzia wspomagające mogły go zrozumieć. Oznacza to poprawny semantyczny znacznik HTML (przyciski to prawdziwe elementy button, a nie elementy div ostylowane na przyciski), poprawną hierarchię nagłówków i etykiety ARIA tam, gdzie trzeba opisać złożone elementy interaktywne. Sklep powinien działać w różnych przeglądarkach i na różnych urządzeniach.
Częste bariery dostępności w sklepach internetowych
Oto najczęstsze problemy z dostępnością w sklepach internetowych:
Brakujący lub słaby tekst alternatywny zdjęć produktów
Wiele sklepów nie ma tekstu alternatywnego do zdjęć produktów albo ma niejasny, jak „obraz” czy „zdjęcie produktu”. Osoby korzystające z czytników ekranu nie widzą obrazów. Tekst alternatywny musi opisywać to, co na obrazie ważne. Dla czerwonej koszulki dobry tekst to „czerwona bawełniana koszulka z okrągłym dekoltem i kieszonką z przodu”, a nie „koszulka” ani „zdjęcie czerwonej koszulki”. Dla selektora wariantów produktu tekst alternatywny może jasno opisywać próbkę koloru lub opcję stylu. Każde zdjęcie produktu potrzebuje dokładnego, opisowego tekstu alternatywnego.
Formularze bez poprawnych etykiet
Gdy pole formularza (e-mail, telefon, adres) nie ma powiązanej etykiety albo etykieta to tylko wizualny tekst zastępczy, osoby korzystające z czytników ekranu nie wiedzą, co wpisać. Poprawnie oznaczone formularze mają niewidoczne, ale dostępne elementy etykiet, które mówią czytnikom ekranu, do czego służy każde pole.
Brak nawigacji klawiaturą
Niektóre strony wymagają myszy do nawigacji lub dokończenia zakupu. Osoby korzystające tylko z klawiatury nie mogą używać rozwijanych menu, nie widzą, który element jest aktywny, lub nie mogą przechodzić klawiszem Tab po polach formularza w logicznej kolejności. Każda funkcja powinna być dostępna z klawiatury. Fokus klawiatury powinien być widoczny na stronie, by użytkownicy wiedzieli, gdzie są.
Słaby kontrast kolorów
Jasnoszary tekst na białym tle może być dla Ciebie czytelny. Nie jest czytelny dla osób słabowidzących. WCAG poziom AA wymaga współczynnika kontrastu co najmniej 4,5:1 dla zwykłego tekstu. Przyciski, linki i każdy tekst, który użytkownicy muszą przeczytać, muszą spełniać ten standard. Sprawdź kontrast bezpłatnym narzędziem do sprawdzania kontrastu.
Mylący układ nagłówków
Osoby korzystające z czytników ekranu często poruszają się po stronie, przeskakując między nagłówkami. Jeśli strona przechodzi z H1 do H3 do H2 albo używa nagłówków tylko do stylizacji, czytniki ekranu tworzą mylące doświadczenie. Używaj nagłówków w logicznej kolejności. Jeden H1 na stronę, potem H2 dla głównych sekcji, H3 dla podsekcji. Nigdy nie pomijaj poziomów nagłówków.
Przyciski i linki bez jasnego celu
Przycisk z napisem „kliknij tutaj” nic nie mówi użytkownikom czytników ekranu o tym, co da kliknięcie. Używaj opisowych tekstów przycisków: „Dodaj do koszyka”, „Zobacz opinie”, „Przejdź do zamówienia”. Jeśli potrzebujesz przycisku z ikoną, dodaj tekst lub etykietę ARIA opisującą działanie. Każdy element interaktywny musi mieć jasną, opisową etykietę.
Niedostępne menu rozwijane i filtry
Menu filtrów produktów, rozwijane listy kategorii i opcje sortowania działające tylko myszą to częste bariery. Użytkownicy klawiatury muszą mieć do nich dostęp w ten sam sposób. Złożone komponenty interaktywne potrzebują ról ARIA i obsługi klawiatury, by działały z technologią wspomagającą.
Jak zadbać o dostępność sklepu
Dostępność nie wymaga zatrudniania drogiego konsultanta ani kupowania specjalistycznego oprogramowania. Zacznij od podstaw:
1. Napisz tekst alternatywny do wszystkich zdjęć produktów
To zmiana o największym wpływie. Przejrzyj produkty i napisz opisowy tekst alternatywny do każdego zdjęcia. Opisz produkt, jego kolor, materiał, stan i cechy charakterystyczne. Sprawdź tekst, czytając go na głos. Czy osoba, która nie widzi obrazu, rozumie produkt? Jeśli nie, popraw go.
2. Zadbaj, by wszystkie formularze miały poprawne etykiety
Każde pole formularza musi mieć w kodzie powiązany element etykiety. Nie polegaj na tekście zastępczym. Usuń tekst zastępczy po aktywowaniu pola albo zachowaj go, ale dodaj prawdziwą etykietę. Grupy pól wyboru i przycisków radiowych grupuj i jasno oznaczaj. Błędy walidacji formularzy powinny być konkretne i mówić użytkownikom dokładnie, co poprawić.
3. Upewnij się, że nawigacja klawiaturą działa
Przetestuj cały sklep wyłącznie klawiaturą. Naciskaj Tab, by się poruszać. Czy dotrzesz do każdego przycisku, linku i formularza? Czy widzisz, gdzie jest fokus? Czy kolejność tabulatora jest logiczna (od lewej do prawej, od góry do dołu)? Jeśli użytkownicy klawiatury utkną lub nie dotrą do czegoś, napraw to. Większość barier dostępności to bariery klawiatury.
4. Sprawdź i popraw kontrast kolorów
Użyj bezpłatnego narzędzia do sprawdzania kontrastu na stronie produktu, przyciskach, linkach i etykietach formularzy. Upewnij się, że tekst ma kontrast 4,5:1 dla zwykłego tekstu i 3:1 dla dużego (18 pkt lub więcej). Nie polegaj wyłącznie na kolorze do przekazywania informacji (np. „czerwone produkty są w promocji”). Dodaj etykiety tekstowe lub ikony, by wesprzeć znaczenie.
5. Popraw strukturę nagłówków
Sprawdź strukturę strony. Powinien być jeden H1 (główny tytuł strony), potem H2 dla głównych sekcji, H3 dla podsekcji. Nigdy nie pomijaj poziomów nagłówków. Używaj nagłówków do logicznej struktury treści, a nie do stylizacji. Jeśli potrzebujesz ostylowanego tekstu, który nie jest prawdziwym nagłówkiem, użyj elementu div i CSS, a nie znacznika nagłówka.
6. Pisz jasne teksty linków i przycisków
Osoby korzystające z czytników ekranu często wywołują listę wszystkich linków na stronie. Linki powinny mieć sens poza kontekstem. „Dowiedz się więcej o opcjach wysyłki” jest lepsze niż „dowiedz się więcej”. „Zobacz opinie o produkcie” jest lepsze niż „przeczytaj opinie”. Przyciski powinny jasno opisywać działanie: „Dodaj do koszyka”, „Przejdź do zamówienia”, „Zapisz na później”.
7. Testuj z technologią wspomagającą
Pobierz bezpłatny czytnik ekranu dla Windows albo użyj wbudowanych narzędzi dostępności na Macu i iPhonie. Posłuchaj, jak brzmi Twoja strona. Czy da się sfinalizować zakup wyłącznie klawiaturą i czytnikiem ekranu? To prawdziwy test dostępności. Wiele barier staje się oczywistych, gdy próbujesz korzystać z własnego sklepu tak, jak robi to osoba niewidoma lub używająca tylko klawiatury.
Testowanie i audyt dostępności
Po wprowadzeniu zmian przetestuj sklep pod kątem dostępności. Zacznij od tych narzędzi:
Automatyczne narzędzia testujące
Bezpłatne narzędzia, w tym Lighthouse (wbudowany w Chrome), przeskanują strony i wskażą częste problemy, jak brakujący tekst alternatywny, niski kontrast i zła struktura nagłówków. Takie narzędzia wychwytują może 30% problemów z dostępnością, więc to punkt wyjścia, a nie pełna odpowiedź. Użyj ich do szybkiego skanu, ale nie zakładaj, że brak błędów oznacza pełną dostępność strony.
Testowanie klawiaturą
Poruszaj się po stronie wyłącznie klawiszami Tab, Shift+Tab, Enter i strzałkami. Bez myszy. To najważniejszy test. Czy da się wykonać każde zadanie? Czy utykasz? Czy fokus jest widoczny? Czy kolejność tabulatora ma sens? Jeśli nawigacja klawiaturą nie działa, sklep nie spełnia standardu dostępności, niezależnie od tego, co mówią narzędzia automatyczne.
Testowanie czytnikiem ekranu
Posłuchaj swojej strony przez czytnik ekranu (na Windows lub na Macu). Czy czytnik jasno opisuje zdjęcia produktów? Czy rozumiesz etykiety formularzy? Czy nawigacja ma sens? Czy są niewyjaśnione przyciski lub linki? Profesjonalne audyty dostępności często angażują niewidomych testerów, ale większe problemy wychwycisz, samodzielnie testując czytnikiem ekranu na podstawowym poziomie.
Ręczny przegląd kodu
Sprawdź kod HTML pod kątem poprawnego znacznika semantycznego. Przyciski powinny być elementami button, a nie ostylowanymi div. Linki powinny być znacznikami kotwicy. Pola formularza potrzebują elementów etykiet. Nagłówki powinny być znacznikami h1, h2, h3 w kolejności, a nie h1, h3, h2. Dobry semantyczny HTML to fundament dostępności.
Jak WEMASY pomaga w dostępności
Kreator stron WEMASY jest zbudowany z myślą o dostępności. Platforma zawiera semantyczną strukturę HTML, poprawną obsługę formularzy z dostępnymi etykietami, menu i funkcje koszyka obsługiwane klawiaturą oraz narzędzia do łatwego dodawania tekstu alternatywnego do obrazów. Gdy budujesz sklep w WEMASY, kod HTML jest już ustrukturyzowany pod kątem dostępności. Nie dziedziczysz niedostępnego kodu od platformy.
To nie znaczy, że Twoja strona jest automatycznie w pełni dostępna: nadal musisz zadbać o dobry tekst alternatywny, jasny język i testy z prawdziwymi użytkownikami. Fundament WEMASY usuwa jednak wiele typowych barier, które trapią inne platformy e-commerce. Co zawiera każdy plan, sprawdzisz na stronie z cennikiem.
Biznesowe argumenty za dostępnością
Poza zgodnością z prawem dostępność to dobry biznes. Dostępne strony są wygodniejsze dla wszystkich, nie tylko dla osób z niepełnosprawnościami. Jasny język, dobry kontrast, logiczna struktura i nawigacja klawiaturą pomagają starszym użytkownikom, osobom korzystającym z urządzeń mobilnych, osobom w hałaśliwym otoczeniu i z wolnym internetem. Strona dostępna dla osób z niepełnosprawnościami jest lepsza dla wszystkich.
Mówiąc wprost: co czwarta dorosła osoba w USA ma niepełnosprawność. To około 65 milionów ludzi. Jeśli sklep nie jest dostępny, wykluczasz ogromny rynek. Zostawiasz też pieniądze na stole. Osoby niewidome i słabowidzące wydają w internecie miliardy. Chcą kupować w Twoim sklepie. Umożliw im to.
Po stronie prawnej ryzyko jest realne. W 2025 roku złożono ponad 5000 pozwów dotyczących dostępności stron. Sklepy internetowe stanowią 70% tych spraw. Pismo z żądaniem z powodu naruszeń dostępności kosztuje czas i honoraria prawników, by się bronić. Ugoda bez naprawy źródła problemów tylko zaprasza kolejne roszczenia. Najmądrzejsze podejście to naprawić stronę teraz, udokumentować działania i całkowicie uniknąć problemu.
Jak zacząć
Jeśli sklep nie jest dostępny, nie panikuj. Zacznij od poprawek o największym wpływie: tekst alternatywny, nawigacja klawiaturą i kontrast. Te trzy zmiany usuną większość barier dostępności. Przetestuj nawigację klawiaturą i czytnik ekranu. Napraw znalezione problemy. Udokumentuj pracę. Testuj regularnie, szczególnie po zmianach na stronie. Dostępność to nie jednorazowy projekt, tylko stała praktyka budowania z myślą o wszystkich.
Najczęstsze pytania
Czy mój mały sklep naprawdę podlega ADA?
Tak. ADA obowiązuje wszystkie firmy otwarte dla publiczności, niezależnie od wielkości. Nie ma wyjątku dla małych firm. Jeśli sprzedajesz online, Twoja strona jest objęta przepisami.
Jaka jest różnica między dostępnym a zgodnym?
Dostępna strona oznacza, że osoby z niepełnosprawnościami faktycznie mogą z niej korzystać. Zgodna strona oznacza, że spełnia standard techniczny, jak WCAG 2.1 poziom AA. Strona może technicznie spełniać standard i nadal być trudna w użyciu albo być bardzo użyteczna, a nie technicznie doskonała. Celem jest jedno i drugie: dostępność w praktyce i zgodność ze standardem.
Czy muszę kogoś zatrudnić, by sklep był dostępny?
Niekoniecznie. Jeśli sklep ma podstawowe problemy (brak tekstu alternatywnego, słaby kontrast, niedziałająca nawigacja klawiaturą), wiele z nich możesz naprawić samodzielnie. Napisz tekst alternatywny, sprawdź kontrast bezpłatnym narzędziem, przetestuj klawiaturą i czytnikiem ekranu. Jeśli strona jest zbudowana na nowoczesnej platformie z poprawną strukturą HTML, poprawa dostępności jest często prosta. Większe strony ze złożoną funkcjonalnością mogą skorzystać z profesjonalnego audytu, ale małe sklepy często naprawią największe bariery we własnym zakresie.
Co zrobić, gdy dostanę pismo z żądaniem dotyczącym dostępności?
Potraktuj je poważnie. Nie ignoruj go. Pisma te zwykle dają termin na naprawę problemów. Pracuj z osobą, która tworzy stronę, lub z pomocą techniczną platformy, by zająć się wskazanymi naruszeniami. Dokumentuj wszystko, co robisz. Warto też skonsultować się z prawnikiem znającym prawo dostępności. Ugoda bez naprawy źródła problemów nie jest rozwiązaniem długoterminowym: napraw stronę.
Czy poprawa dostępności spowolni ładowanie strony?
Nie. Dostępność i wydajność to osobne sprawy. Strona może być szybka i niedostępna albo wolna i dostępna. Semantyczny HTML (struktura kodu potrzebna do dostępności) jest często lżejszy i szybszy niż źle napisany kod. Wiele poprawek dostępności, jak poprawna struktura nagłówków i jasny język, nie wpływa na szybkość.
Czy WCAG 2.1 poziom AA obejmuje wszystko, czego potrzebuję do zgodności z prawem?
WCAG 2.1 poziom AA to standard przywoływany w większości spraw prawnych dotyczących dostępności. To miarka, której sądy używają do oceny, czy strona jest dostępna. Zgodność z WCAG 2.1 poziom AA to najlepszy sposób, by wykazać, że poważnie potraktowano dostępność i spełniono standard prawny.
Powiązane artykuły: Polityka prywatności, zgoda na cookies i RODO w Twoim sklepie oraz Jak chronić markę i produkty przed kopiowaniem.