WP WordPress WordPress & WooCommerce Początkujący

EAA Accessibility Auto-Fixer: kompletny przewodnik

Instalacja, audyt i dostosowanie witryny WordPress/WooCommerce do European Accessibility Act: skaner WCAG 2.2 AA, korekty automatyczne, teksty alternatywne przez AI i deklaracja prawna.

Zaktualizowano Wersja modułu 1.0.0

Prezentacja

EAA Accessibility Auto-Fixer dostosowuje Twoją witrynę WordPress i WooCommerce do European Accessibility Act (dyrektywa UE 2019/882, obowiązująca od 28 czerwca 2025). Wtyczka łączy cztery elementy: skaner WCAG 2.2 na poziomie AA, automatyczny korektor frontendu, generator tekstów alternatywnych przez AI (Anthropic Claude) oraz generator prawnej deklaracji dostępności.

Kogo to dotyczy? Sklepów internetowych z UE zatrudniających ponad 10 osób ALBO osiągających ponad 2 mln € rocznego obrotu. Mikroprzedsiębiorstwa są zwolnione w zakresie usług, ale muszą zapewnić dostępność swoich produktów.

Instalacja

  1. Pobierz ZIP ze swojego konta DataFirefly.
  2. W WordPressie przejdź do Wtyczki → Dodaj nową → Wyślij wtyczkę na serwer, wybierz ZIP i kliknij Zainstaluj teraz.
  3. Kliknij Włącz. Wtyczka automatycznie tworzy 4 tabele (wp_eaa_audits, wp_eaa_issues, wp_eaa_fixes, wp_eaa_alt_cache), planuje cotygodniowy audyt i generuje stronę „Deklaracja dostępności” zawierającą shortcode [eaa_accessibility_declaration].

Wymagania: WordPress 6.2+, WooCommerce 8.0+ (opcjonalnie, wtyczka działa też na samym WordPressie), PHP 8.1+.

Pierwszy audyt

  1. Przejdź do EAA Accessibility → Audyt.
  2. Adres strony głównej jest wstępnie wypełniony; możesz zastąpić go dowolnym adresem z witryny.
  3. Kliknij Uruchom audyt. Skaner analizuje stronę i pokazuje wynik w skali 100, listę nieprawidłowości (waga, reguła, kryterium WCAG, fragment HTML, sugestia) oraz przycisk Popraw przy nieprawidłowościach możliwych do automatycznej korekty.

Zrozumieć wynik

Wynik startuje od 100, a każda nieprawidłowość odejmuje punkty zależnie od wagi: krytyczna 15 punktów, poważna 8, umiarkowana 3, drobna 1. Wynik 90 lub wyższy wyświetla się na zielono, od 70 do 89 na pomarańczowo, poniżej na czerwono. Deklaracja prawna przejmuje ten wynik: 90+ daje „W pełni zgodna”, 50 do 89 „Częściowo zgodna”, poniżej 50 „Niezgodna”.

15 sprawdzanych reguł

  • html-lang: atrybut lang na elemencie głównym (WCAG 3.1.1)
  • page-title: obecność i treść znacznika title (2.4.2)
  • headings: obecność jednego h1 i hierarchia bez przeskoków (1.3.1)
  • image-alt: atrybut alt na wszystkich obrazach (1.1.1)
  • link-name: dostępny tekst przy każdym linku (2.4.4)
  • button-name: dostępna nazwa przy każdym przycisku (4.1.2)
  • label: etykieta przy każdym polu formularza (1.3.1, 4.1.2)
  • skip-link: link pomijający na początku strony (2.4.1)
  • landmarks: obecny punkt orientacyjny main (1.3.1)
  • duplicate-id: brak zduplikowanych identyfikatorów (4.1.1)
  • aria-roles: prawidłowe role ARIA (4.1.2)
  • target-size: cele dotykowe minimum 24×24 px (2.5.8, nowość w WCAG 2.2)
  • color-contrast: kontrast tekstu do tła minimum 4,5:1 (1.4.3)
  • tabindex: brak dodatniego tabindex (2.4.3)
  • autoplay: brak niekontrolowanego automatycznego odtwarzania (1.4.2)

Korekty automatyczne

W EAA Accessibility → Ustawienia → Aktywne korekty włącz poprawki, które wtyczka stosuje w czasie rzeczywistym przez bufor wyjścia, bez modyfikowania Twojego motywu:

  • Atrybut lang: dodaje język witryny na elemencie głównym, jeśli go brakuje.
  • Link pomijający: wstawia „Przejdź do treści” na początku strony, widoczne przy fokusie klawiatury.
  • Brakujący tekst alternatywny: oznacza obrazy dekoracyjne (klasy decoration, icon i podobne) pustym atrybutem alt; obrazy treściowe przechodzą przez AI, jeśli jest włączone.
  • Etykiety formularzy: dodaje aria-label wyprowadzone z placeholdera albo z name na polach bez etykiety.
  • Role ARIA i ikony: aria-label na przyciskach ikonowych, role=”presentation” na dekoracyjnych SVG.
  • Wskaźnik fokusu: wstrzykuje kontrastowy styl :focus-visible.
  • Kontrasty: koryguje kolory inline poniżej 4,5:1, automatycznie przyciemniając albo rozjaśniając.
  • Rozmiar celów: gwarantuje 24×24 px na przyciskach i linkach przez CSS.

Każda korekta trafia do dziennika w tabeli wp_eaa_fixes z wartością przed i po, co przydaje się przy kontroli. Sumy per typ znajdziesz w Panelu.

Jeśli korekta koliduje z Twoim motywem (na przykład link pomijający już istnieje), wyłącz daną poprawkę: wtyczka wykrywa istniejące elementy, ale niektóre mocno przerobione motywy mogą wymagać dostosowania.

Generowanie tekstów alternatywnych przez AI

Konfiguracja

  1. Utwórz klucz API na console.anthropic.com.
  2. W EAA Accessibility → Ustawienia → Generowanie AI zaznacz Włącz AI, wklej klucz i kliknij Testuj połączenie.
  3. Wybierz model: Claude Haiku 4.5 (domyślny, około 0,0001 € za obraz, zalecany), Sonnet 4.6 (wyższa jakość) albo Opus 4.7 (jakość maksymalna).

Generowanie masowe

Z Panelu przycisk generowania masowego przetwarza bibliotekę mediów partiami po 5 obrazów. Każdy opis powstaje w języku załącznika (FR/EN/ES/DE/IT), trafia do wp_eaa_alt_cache i zapisuje się w polu alt WordPressa. Cache zapobiega ponownemu generowaniu: obraz już opisany w danym języku nigdy nie jest wysyłany do API ponownie.

Obrazy większe niż 4 MB są automatycznie skalowane do maksymalnie 1024 px przed wysłaniem do API, bez wpływu na Twoje pliki oryginalne.

Widżet dla odwiedzających

Włącz go w Ustawienia → Widżet dla odwiedzających. W prawym dolnym rogu witryny pojawia się pływający przycisk ♿, który otwiera panel z 8 preferencjami: rozmiar tekstu (5 poziomów, od 100 % do 200 %), wysoki kontrast, czcionka przyjazna dysleksji, zwiększone odstępy, ograniczone animacje, podkreślanie linków, powiększony kursor oraz przycisk resetu. Wybory zapisywane są w localStorage (bez ciasteczek, bez wysyłania danych na serwer) i przywracane przy każdej wizycie. Panel jest w pełni obsługiwany klawiaturą i zamyka się klawiszem Esc.

Deklaracja prawna

Strona utworzona przy aktywacji wyświetla przez shortcode [eaa_accessibility_declaration]: stan zgodności wyliczony na podstawie ostatniego audytu, wynik, datę, treści niedostępne, metodologię i Twoje dane kontaktowe. Uzupełnij te informacje w Ustawienia → Informacje do deklaracji prawnej: nazwa firmy, e-mail kontaktowy do spraw dostępności, telefon, adres pocztowy.

Zalecane uzupełnienie ręczne. Dodaj swoje identyfikatory prawne (numer rejestrowy, NIP albo odpowiednik) i zleć weryfikację deklaracji ekspertowi od dostępności: wtyczka pokrywa od 30 do 40 % kryteriów możliwych do zautomatyzowania, a do pełnej zgodności nadal potrzebny jest przegląd wykonany przez człowieka.

Następnie dodaj link do tej strony w stopce: to wymóg EAA.

Audyty zaplanowane

W Ustawienia → Audyt zaplanowany wybierz częstotliwość: dzienną, tygodniową (domyślną) albo miesięczną. Cron WordPressa automatycznie skanuje wtedy stronę główną i zasila historię. Wszystkie przeszłe audyty przejrzysz w EAA Accessibility → Historia, z wynikiem, czasem trwania i rozkładem nieprawidłowości według wagi.

Deinstalacja

Domyślnie deinstalacja zachowuje tabele i historię (identyfikowalność prawna). Aby usunąć wszystko, włącz przed odinstalowaniem opcję usuwania danych w ustawieniach: 4 tabele, opcje i strona deklaracji zostaną wtedy usunięte.

Rozwiązywanie problemów

Skaner zwraca błąd połączenia

Skaner używa wp_remote_get do pobrania strony. Sprawdź, czy serwer może wywołać sam siebie (loopback): niektórzy hostingodawcy blokują żądania wychodzące do własnej domeny witryny. Przetestuj przez Narzędzia → Stan witryny.

Test klucza API się nie udaje

Sprawdź, czy klucz zaczyna się od sk-ant-, czy Twoje konto Anthropic ma kredyt i czy serwer zezwala na połączenia wychodzące do api.anthropic.com po HTTPS.

Korekty się nie stosują

Korektor jest nieaktywny na kanałach RSS, żądaniach REST/AJAX, w administracji i w cronie. Jeśli wtyczka cache serwuje wersję statyczną, wyczyść cache po aktywacji. Sprawdź też, czy Włącz korektor frontendu jest zaznaczone.

Widżet się nie pojawia

Sprawdź, czy Widżet dla odwiedzających jest włączony w ustawieniach i czy Twój motyw wywołuje wp_footer(): widżet wstrzykiwany jest przez ten hook.

Czy ta strona była pomocna?

Nadal utknąłeś? Napisz do wsparcia