Europejski Akt o Dostępności. Co musi zrobić firma ze stroną i sklepem

Kogo obejmuje Europejski Akt o Dostępności, jakie wymagania stawia stronom i sklepom internetowym, jak samodzielnie sprawdzić serwis i od czego zacząć poprawki.

Europejski Akt o Dostępności. Co musi zrobić firma ze stroną i sklepem

Dostępność cyfrowa przez lata była tematem wyłącznie instytucji publicznych. Zmieniło się to wraz z Europejskim Aktem o Dostępności, który przeniósł obowiązki na firmy prywatne. Dla właściciela sklepu internetowego albo strony usługowej oznacza to konkretną listę rzeczy do zrobienia, a nie deklarację dobrych intencji.

Kogo to dotyczy

Przepisy obejmują produkty i usługi kierowane do konsumentów, w tym handel elektroniczny, czyli praktycznie każdy sklep internetowy sprzedający osobom prywatnym. Poza sklepami dotyczy to między innymi usług bankowych, transportu pasażerskiego, książek elektronicznych i usług telekomunikacyjnych.

Istotny wyjątek: mikroprzedsiębiorstwa świadczące usługi, czyli firmy zatrudniające mniej niż 10 osób i o obrocie do 2 milionów euro, są zwolnione z części obowiązków. Zwolnienie nie obejmuje jednak producentów wyrobów, a definicja bywa mylnie rozumiana, więc warto ją sprawdzić w swojej sytuacji, zamiast zakładać, że mała firma to automatycznie brak obowiązków.

Warto też rozdzielić dwie rzeczy. Sklep sprzedający konsumentom podlega przepisom. Strona wizytówkowa firmy budowlanej, która niczego nie sprzedaje online, formalnie zwykle nie, ale to nie znaczy, że dostępność jej nie dotyczy w praktyce. Wrócę do tego na końcu.

Czego konkretnie wymagają przepisy

Punktem odniesienia jest norma zgodna z wytycznymi WCAG na poziomie AA. Brzmi abstrakcyjnie, więc przełóżmy to na rzeczy, które widać na stronie.

Kontrast tekstu. Zwykły tekst musi mieć kontrast do tła co najmniej 4,5 do 1. To jest wymóg, który wywraca najwięcej projektów graficznych, bo modny jasnoszary tekst na białym tle prawie nigdy go nie spełnia.

Obsługa klawiaturą. Całą stronę, łącznie z menu, filtrami i koszykiem, trzeba dać się obsłużyć bez myszy, klawiszem tabulacji. Aktualnie zaznaczony element musi być widocznie oznaczony. Bardzo częsty błąd: usunięcie obramowania fokusa w CSS, bo „brzydko wygląda”.

Teksty alternatywne obrazów. Każdy obraz niosący treść potrzebuje opisu. Zdjęcia czysto dekoracyjne mają mieć pusty atrybut, żeby czytnik ekranu je pomijał.

Formularze z etykietami. Pole musi mieć powiązaną etykietę, a nie tylko szary tekst zastępczy w środku. Komunikat o błędzie musi mówić, co jest źle i gdzie, a nie tylko zmieniać ramkę na czerwoną.

Struktura nagłówków. Jeden H1, dalej H2 i H3 w logicznej kolejności, bez przeskakiwania poziomów. To jest dokładnie ta sama zasada, która obowiązuje w pozycjonowaniu, więc tutaj dostępność i SEO idą tą samą drogą.

Wideo i dźwięk. Napisy do materiałów wideo z mową, transkrypcja dla podcastów.

Brak pułapek. Karuzele przewijające się automatycznie bez możliwości zatrzymania, wyskakujące okna, których nie da się zamknąć klawiaturą, treści migające szybciej niż trzy razy na sekundę.

Jak sprawdzić własną stronę w kwadrans

Zanim zamówisz audyt, zrób cztery testy samodzielnie. Wyłapią większość problemów.

Test klawiatury. Otwórz stronę główną i przejdź ją całą tabulatorem, bez dotykania myszy. Spróbuj wejść w menu, otworzyć produkt, dodać do koszyka i wypełnić formularz. Jeżeli w którymkolwiek miejscu nie widzisz, gdzie jesteś, albo utykasz, masz problem.

Test kontrastu. Wejdź w narzędzia deweloperskie przeglądarki, klawisz F12, i sprawdź kontrast tekstu w raporcie dostępności. Przeglądarki pokazują to dziś wprost.

Test powiększenia. Powiększ stronę do 200 procent. Tekst ma się przelewać, a nie znikać poza ekran ani zachodzić na siebie.

Test automatyczny. Bezpłatne narzędzia sprawdzające dostępność wyłapią brakujące teksty alternatywne, puste linki i błędy w formularzach. Ważne zastrzeżenie: automat wykrywa około jednej trzeciej problemów. Reszty nie da się sprawdzić inaczej niż ręcznie.

Czego nie robić

Nie kupuj nakładki dostępnościowej. Skrypty obiecujące „zgodność jednym kliknięciem”, dokładające pływającą ikonę z suwakami kontrastu, nie zapewniają zgodności. Organizacje osób z niepełnosprawnościami wypowiadają się o nich krytycznie, a w innych krajach były przedmiotem pozwów. Nakładka nie naprawia kodu, tylko zasłania problem.

Nie zaczynaj od deklaracji dostępności. Deklaracja opisuje stan faktyczny. Napisanie jej przed poprawkami oznacza opublikowanie dokumentu przyznającego, że serwis wymagań nie spełnia.

Nie traktuj tego jako projektu jednorazowego. Każdy nowy wpis bez opisu obrazu i każda nowa podstrona z niskim kontrastem cofa efekt.

Od czego zacząć, gdy budżet jest ograniczony

Kolejność według stosunku efektu do kosztu.

  1. Kontrast i widoczny fokus - zwykle kilka reguł CSS, a naprawia dwie najczęstsze kategorie błędów.
  2. Formularze - etykiety, komunikaty błędów, poprawne typy pól. Przy okazji rośnie konwersja, bo dostępny formularz jest po prostu łatwiejszy.
  3. Teksty alternatywne - jednorazowa praca na bibliotece mediów plus nawyk na przyszłość.
  4. Nagłówki i struktura - porządkuje serwis również pod wyszukiwarki.
  5. Nawigacja klawiaturą w koszyku i kasie - najważniejsza ścieżka w sklepie.
  6. Wideo - napisy do materiałów, które faktycznie mają ruch.

Dlaczego warto, nawet jeżeli formalnie nie musisz

Trzy powody, niezależne od przepisów.

Po pierwsze, skala. Osoby z ograniczeniami wzroku, słuchu lub sprawności ruchowej to znaczący odsetek populacji, a dochodzą do tego sytuacje przejściowe: złamana ręka, jasne słońce na ekranie telefonu, oglądanie wideo bez dźwięku w tramwaju.

Po drugie, przetargi i klienci instytucjonalni. Podmioty publiczne mają własne obowiązki i coraz częściej przenoszą je na dostawców. Niedostępna strona potrafi wykluczyć firmę z postępowania.

Po trzecie, wyszukiwarki. Poprawna struktura nagłówków, opisy obrazów, sensowne teksty linków i szybkie ładowanie to jednocześnie fundament dostępności i fundament SEO. Robot wyszukiwarki korzysta ze strony podobnie jak czytnik ekranu: bez wzroku, po strukturze.

Najczęstsze pytania

Czy strona wizytówkowa małej firmy musi być dostępna?

Jeżeli firma nie sprzedaje online i mieści się w definicji mikroprzedsiębiorstwa świadczącego usługi, część obowiązków jej nie obejmuje. Nie zwalnia to jednak z dostępności, gdy firma startuje w przetargach publicznych albo obsługuje instytucje.

Ile kosztuje dostosowanie sklepu?

Zależy od stanu wyjściowego. Sklep na aktualnym, dobrze napisanym szablonie wymaga zwykle poprawek kontrastu, fokusa i formularzy, czyli kilku dni pracy. Sklep na mocno przerabianym szablonie sprzed kilku lat bywa tańszy do przebudowania niż do naprawienia.

Czy dostępność wpływa na pozycje w Google?

Nie ma osobnego czynnika rankingowego o nazwie dostępność. Jest natomiast duża część wspólna: struktura nagłówków, opisy obrazów, teksty linków, szybkość i użyteczność mobilna. Poprawiając dostępność, poprawiasz te elementy niejako przy okazji.

Czy wystarczy raport z narzędzia automatycznego?

Nie. Narzędzia automatyczne wykrywają około jednej trzeciej problemów. Nie ocenią sensowności opisu obrazu, logiki kolejności tabulatora ani zrozumiałości komunikatu o błędzie. Potrzebny jest test ręczny.

Co dalej

Zacznij od czterech testów opisanych wyżej. Zajmą kwadrans i dadzą Ci listę rzeczy do naprawy uporządkowaną według tego, co faktycznie blokuje użytkownika.

Jeżeli wolisz dostać gotową listę z priorytetami, robimy audyty dostępności razem z wyceną poprawek. Sprawdzamy też dostępność przy okazji audytu SEO, bo znaczna część problemów jest wspólna. Budując nowe strony i sklepy, uwzględniamy te wymagania od początku, co jest wielokrotnie tańsze niż naprawianie później.