Czy Twój lokalizator sklepów spełnia wymogi EAA? Checklista dla marek z wieloma lokalizacjami

Wyobraź sobie: Twoja marka prowadzi 150 lokalizacji w Europie. Zainwestowałeś w lokalizator sklepów, zoptymalizowałeś swoje wpisy i osiągasz dobry ruch organiczny. Następnie otrzymujesz formalne zawiadomienie od krajowego organu ds. praw osób niepełnosprawnych: Twój lokalizator sklepów nie spełnia standardów dostępności.

To nie jest scenariusz hipotetyczny. Dzieje się to teraz.

Europejski Akt o Dostępności (EAA) stał się egzekwowalny w czerwcu 2025 roku, a organy krajowe w całej UE przeprowadzają audyty, wydają nakazy i w niektórych przypadkach nakładają kary. Francja, Niemcy, Hiszpania i Holandia wszczęły aktywne postępowania egzekucyjne, przy czym organizacje ds. praw osób niepełnosprawnych składają formalne skargi przeciwko dużym markom detalicznym i transportowym.

Mimo to większość marek z wieloma lokalizacjami nie przeprowadziła audytu swoich lokalizatorów sklepów pod kątem zgodności z WCAG 2.2 AA, standardu wymaganego przez EAA.

Ten artykuł wyjaśnia, co zgodność z EAA oznacza w praktyce dla Twojego lokalizatora sklepów, i zawiera praktyczną checklistę audytu.

Europejski Akt o Dostępności: harmonogram i aktualne egzekwowanie

EAA to dyrektywa wymagająca, aby wszystkie produkty i usługi cyfrowe sprzedawane lub obsługiwane na rynku UE spełniały minimalne standardy dostępności. Obejmuje:

• Strony internetowe i aplikacje mobilne (w tym lokalizatory sklepów i lokalne strony docelowe)
• Terminale samoobsługowe (kioski, bankomaty)
• Platformy e-commerce
• Aplikacje mobilne z istotnymi funkcjami

Wymóg podstawowy: usługi cyfrowe muszą spełniać standardy WCAG 2.2 na poziomie AA, międzynarodowy punkt odniesienia dla dostępności sieci.

Harmonogram egzekwowania

• Grudzień 2016: Opublikowanie dyrektywy EAA
• 28 czerwca 2025: Termin egzekwowania: wszystkie objęte usługi cyfrowe muszą być zgodne
• 2025 do dziś: Organy krajowe przeprowadzają audyty, wydają zawiadomienia o zgodności i wprowadzają kary

Egzekwowanie jest już aktywne. Francuskie organizacje ds. praw osób niepełnosprawnych złożyły skargi przeciwko dużym sieciom handlowym za lokalizatory sklepów, które nie zdały testów dostępności. Niemieccy regulatorzy badają dostępność aplikacji w różnych sektorach. Hiszpania wymagała od marek przeprowadzenia audytów dostępności do początku 2026 roku, termin, który już minął.

Kary różnią się w zależności od państwa członkowskiego, ale konsekwencje są poważne. Niezgodność może skutkować:

• Grzywnami do 25 000 € za naruszenie w niektórych krajach
• Obowiązkowymi nakazami naprawczymi z surowymi terminami
• Uszczerbkiem reputacyjnym i wykluczeniem z zamówień publicznych
• Pozwami o dostępność, które rosną w Europie

Co WCAG 2.2 AA faktycznie wymaga od lokalizatorów sklepów

WCAG 2.2 opiera się na czterech zasadach: postrzegalność, funkcjonalność, zrozumiałość i solidność (POUR). Oto, co każda z nich oznacza w praktyce dla lokalizatora sklepów.

Postrzegalność: użytkownicy muszą móc odbierać Twoje treści

Co to oznacza dla lokalizatorów sklepów:

• Alternatywy tekstowe dla obrazów: Każda ikona mapy, zdjęcie sklepu lub element wizualny musi mieć tekst alternatywny, który czytnik ekranu może zinterpretować.
• Kontrast kolorów: Tekst musi spełniać współczynnik kontrastu 4,5:1 względem tła (wymaganie WCAG), 3:1 dla dużego tekstu (18pt+).
• Wideo i multimedia: Jeśli lokalizator zawiera treści wideo, muszą zawierać napisy i audiodeskrypcje.
• Wskaźniki błędów i statusu: Nie mogą opierać się wyłącznie na kolorze. Używaj tekstu, ikon lub innych wizualnych wskazówek.

Częsty błąd: Pineska na mapie jest czerwona, żeby wskazać “teraz otwarte”. Osoba z daltonizmem nie może odróżnić jej od innych pinezek. Rozwiązanie: dodaj widoczną etykietę (“Teraz otwarte”) lub dodatkową ikonę.

Funkcjonalność: użytkownicy muszą móc nawigować i sterować

Co to oznacza dla lokalizatorów sklepów:

• Nawigacja klawiaturą: Każdy interaktywny element musi być dostępny przez Tab, Enter i klawisze strzałek. Bez myszy.
• Łącza przeskoku: Użytkownicy muszą móc pominąć powtarzającą się nawigację nagłówkową, żeby przejść bezpośrednio do pola wyszukiwania.
• Wskaźniki fokusa: Gdy użytkownik przechodzi tabulatorem do przycisku lub pola, musi być wizualnie jasne, który element jest aktywny.
• Rozmiar elementów dotykowych: Na urządzeniach mobilnych elementy klikalne muszą mieć co najmniej 24×24 piksele.

Częsty błąd: Interfejs mapy obsługuje zoom i panoramowanie myszą, ale użytkownicy klawiatury nie mogą zoomować. Rozwiązanie: dodaj skróty klawiaturowe (+ i - dla zoomu, strzałki dla panoramowania).

Zrozumiałość: użytkownicy muszą rozumieć Twoje treści

Co to oznacza dla lokalizatorów sklepów:

• Prosty język: Unikaj żargonu. “Zawęź wyszukiwanie” jest jaśniejsze niż “doprecyzuj zapytanie o lokalizację”.
• Spójna nawigacja: Jeśli filtry pojawiają się na pasku bocznym w wersji desktopowej, muszą być równie dostępne na urządzeniach mobilnych.
• Oznaczone pola formularzy: Każde pole wyszukiwania i filtr musi mieć widoczną, powiązaną etykietę.
• Komunikaty o błędach: Gdy użytkownik poda nieprawidłowy kod pocztowy, pokaż komunikat wyjaśniający, nie tylko czerwoną ramkę.

Częsty błąd: Filtr oznaczony “Typy usług” bez wyjaśnienia dostępnych opcji. Rozwiązanie: użyj “Filtruj według usług (parking, dostęp dla wózków, WiFi)”.

Solidność: lokalizator musi działać z technologiami wspomagającymi

Co to oznacza dla lokalizatorów sklepów:

• Semantyczny HTML: Używaj właściwych elementów HTML. Przyciski powinny być <button>, nie <div onclick>.
• Etykiety ARIA: Tam, gdzie kontekst wizualny nie wystarcza, używaj atrybutów ARIA. Przycisk filtru rozwijający panel potrzebuje aria-expanded="true".
• Powiązania formularzy: Pola formularzy muszą być programowo powiązane ze swoimi etykietami.
• Regiony na żywo: Gdy lokalizator dynamicznie ładuje nowe wyniki, czytniki ekranu muszą być powiadamiane przez aria-live.

Częsty błąd: Przycisk “Załaduj więcej” ładuje kolejne sklepy, ale czytniki ekranu nie są powiadamiane. Rozwiązanie: użyj aria-live="polite" na kontenerze wyników.

Częste błędy dostępności w lokalizatorach sklepów

Na podstawie działań egzekucyjnych EAA w ciągu ostatniego roku oto najczęstsze problemy:

1. Interakcje z mapą niedostępne przez klawiaturę

Użytkownicy myszy mogą klikać, przeciągać i scrollować mapę. Użytkownicy klawiatury często nie mogą. To najczęściej cytowany błąd w audytach EAA.

Rozwiązanie: Dodaj skróty klawiaturowe: + i - dla zoomu, strzałki dla panoramowania. Udokumentuj skróty w tekstach pomocniczych.

Test: Odłącz mysz. Czy możesz przeprowadzić pełne wyszukiwanie sklepu używając tylko klawiatury?

2. Pinezki mapy bez alternatyw tekstowych

Rozwiązanie: Dodaj etykiety tekstowe dla każdego stanu pinezki (“Teraz otwarte”, “Zamknięte”). Używaj ikon obok kolorów.

3. Filtry wyszukiwania bez wyraźnych etykiet

Rozwiązanie:

<label for="service-filter">Filtruj według usług (parking, dostęp dla wózków, WiFi)</label>
<select id="service-filter">
  <option>Parking</option>
  <option>Dostęp dla wózków</option>
  <option>WiFi</option>
</select>

4. Brakujące lub niewystarczające wskaźniki fokusa

Rozwiązanie:

:focus { outline: 3px solid #0066cc; }

5. Dane sklepu na mobile za niedostępną nawigacją

Rozwiązanie: Upewnij się, że wszystkie elementy spełniają minimalną wielkość 24×24 piksele. Testuj nawigację klawiaturą na urządzeniu mobilnym z podłączoną klawiaturą Bluetooth.

6. Komunikaty o błędach używają tylko koloru

Rozwiązanie: Dodaj tekst błędu: “Proszę podać prawidłowy kod pocztowy (5 cyfr)”. Używaj aria-live="assertive".

7. Godziny otwarcia wyświetlane jako obrazy

Rozwiązanie: Używaj tekstu HTML dla wszystkich godzin: <time>10:00</time>–<time>18:00</time>.

Twoja checklista audytu EAA

Krytyczne: napraw natychmiast

• Nawigacja klawiaturą: Czy cały lokalizator można obsługiwać tylko Tab, Shift+Tab, Enter i klawiszami strzałek?
• Wskaźniki fokusa: Czy przy elementach interaktywnych jest wyraźny wizualny wskaźnik?
• Semantyczny HTML: Czy przyciski są <button>, linki <a>, a pola formularzy poprawnie oznaczone?
• Kontrast kolorów: Czy wszystkie teksty i elementy interaktywne spełniają współczynnik kontrastu 4,5:1?
• Etykiety formularzy: Czy każde pole ma widoczny, powiązany tag <label>?
• Tekst alternatywny dla obrazów: Czy zdjęcia sklepów, ikony i mapy mają opisowy tekst alternatywny?
• Komunikaty o błędach: Czy błąd jest komunikowany tekstem, nie tylko kolorem?

Wysoki priorytet: napraw w ciągu 30 dni

• Elementy dotykowe na mobile: Czy klikalne elementy mają co najmniej 24×24 piksele?
• Dostępność mapy: Czy użytkownicy klawiatury mogą zoomować i panoramować? Czy pinezki mają etykiety tekstowe?
• Aktualizacje regionów na żywo: Czy czytniki ekranu są powiadamiane o dynamicznie ładowanych treściach?
• Spójna nawigacja: Czy układ jest spójny na desktopie, tablecie i urządzeniu mobilnym?
• Etykiety ARIA: Czy złożone elementy interaktywne mają potrzebne atrybuty ARIA?
• Łącza przeskoku: Czy użytkownicy mogą pominąć powtarzającą się nawigację?

Średni priorytet: plan na kolejny kwartał

• Napisy dla wideo: Czy treści wideo zawierają napisy?
• Język strony: Czy główny język strony jest zadeklarowany w HTML (<html lang="pl">)?
• Struktura nagłówków: Czy nagłówki są używane w logicznej kolejności (H1, H2, H3)?
• Walidacja formularza: Czy formularz zapewnia dostępną walidację w czasie rzeczywistym?

Testowanie lokalizatora sklepów

Automatyczne testowanie (pierwsze przejście)

Te bezpłatne narzędzia wykrywają około 30 do 40 procent problemów z dostępnością:

• Rozszerzenie WAVE: Oznacza błędy, problemy z kontrastem i brakujący tekst alternatywny bezpośrednio na stronie
• Lighthouse (Chrome DevTools): Zawiera audyt dostępności z priorytetowymi rekomendacjami
• Axe DevTools: Kompleksowe narzędzie z szczegółowymi wskazówkami naprawczymi

Testowanie manualne (wymagane)

1. Test tylko klawiaturą: Odłącz mysz. Czy możesz przeprowadzić pełne wyszukiwanie sklepu używając tylko klawiatury?
2. Test czytnika ekranu: Użyj NVDA (Windows) lub VoiceOver (Mac) i nawiguj przez lokalizator.
3. Test daltonizmu: Użyj symulatora jak Coblis.
4. Test powiększenia: Powiększ przeglądarkę do 200%. Czy układ nadal działa?

EAA a lokalne strony docelowe

EAA nie dotyczy tylko lokalizatorów sklepów. Obejmuje całą cyfrową ścieżkę klienta, w tym lokalne strony docelowe i treści specyficzne dla lokalizacji. Jeśli Twój proces zarządzania lokalnymi wpisami automatycznie generuje strony lokalizacji, zgodność z dostępnością musi być wbudowana w szablon.

Zgodność z EAA jest również spójna z praktykami lokalnego SEO zgodnego z RODO: oba przepisy wymagają od marek traktowania infrastruktury cyfrowej jako czegoś, co służy wszystkim użytkownikom.

Dostępność jako przewaga konkurencyjna

Lokalizatory sklepów zgodne z EAA osiągają lepsze wyniki na standardowych wskaźnikach marketingowych. Mają niższe wskaźniki odrzuceń, wyższe wskaźniki ukończenia wyszukiwań sklepów i lepszą wydajność mobilną.

Marki budujące pod kątem dostępności docierają do szerszej grupy odbiorców, w tym do 15 do 20 procent użytkowników z jakąś formą niepełnosprawności. Zmniejszają też ryzyko prawne i regulacyjne na rynku, gdzie egzekwowanie rośnie rok do roku.

Umów demo

Źródła

1. Dyrektywa Europejskiego Aktu o Dostępności 2019/882. Oficjalny tekst prawny EUR-Lex
2. Wytyczne WCAG 2.2. Standardy dostępności World Wide Web Consortium
3. Web Accessibility Initiative (WAI). Centrum zasobów dostępności W3C
4. Zrozumieć WCAG 2.2: Klawiatura. Szczegółowe wskazówki dotyczące dostępności klawiatury
5. Zrozumieć WCAG 2.2: Minimalny kontrast. Wymagania dotyczące kontrastu kolorów
6. Narzędzie WAVE. Bezpłatne rozszerzenie przeglądarki
7. Audyt dostępności Lighthouse. Chrome DevTools
8. Symulator daltonizmu Coblis. Wizualne narzędzie testowe
9. ARIA Authoring Practices Guide. Przewodnik W3C po ARIA