Dostępność EAA: widget i automatyczne poprawki WCAG (dfaccessibility)

DF Accessibility dostosowuje sklep PrestaShop do europejskiej dyrektywy o dostępności (EAA, Dyrektywa (UE) 2019/882), łącząc trzy elementy: widget dostępności dla odwiedzających, silnik automatycznych poprawek WCAG stosowanych przy ładowaniu każdej strony oraz wielojęzyczny generator prawnej deklaracji dostępności.

Instalacja

1. W panelu administracyjnym PrestaShop otwórz Moduły > Menedżer modułów.
2. Kliknij Zainstaluj moduł i wgraj plik dfaccessibility.zip.
3. Po zakończeniu instalacji kliknij Konfiguruj.

Moduł rejestruje się na trzech hookach (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) i tworzy jedną tabelę statystyk. Od momentu instalacji widget jest aktywny na froncie z ustawieniami domyślnymi, a wszystkie automatyczne poprawki są włączone, z wyjątkiem korekty kontrastu.

Konfiguracja

Widget dostępności

• Włącz widget: wyświetla pływający przycisk na wszystkich stronach frontu.
• Pozycja przycisku: na dole po prawej lub na dole po lewej.
• Kolor akcentu: używany dla przycisku, aktywnych opcji panelu i wymuszonego obrysu fokusa. Wybierz kolor wystarczająco kontrastujący z bielą (domyślny niebieski #2563EB spełnia współczynnik AA).
• Ukryj przycisk na mobile: chowa pływający przycisk poniżej 768px. Preferencje zapisane już przez odwiedzającego nadal obowiązują.

Automatyczne poprawki

Każdą poprawkę można włączyć indywidualnie. Wykonują się w przeglądarce odwiedzającego przy ładowaniu strony: pliki motywu nigdy nie są modyfikowane, a odinstalowanie przywraca pierwotny stan w niezmienionej postaci.

• Brakujące teksty alternatywne: szczegóły heurystyk poniżej.
• Pola formularzy bez etykiety: dodaje aria-label wywiedziony z placeholdera lub nazwy pola.
• Linki otwierające nowe okno: dodaje rel=noopener i słyszalne ostrzeżenie dla czytników ekranu.
• Iframe bez tytułu: dodaje atrybut title wywiedziony z domeny źródłowej.
• Punkty orientacyjne ARIA: dodaje role banner, contentinfo i aria-label nawigacji, gdy ich brakuje.
• Link pomijający: wstrzykuje link „Przejdź do treści głównej” ujawniany przy pierwszym naciśnięciu Tab.
• Widoczny obrys fokusa: wymusza obrys przy fokusie klawiaturowym (kryterium WCAG 2.4.7).
• Automatyczna korekta kontrastu: domyślnie wyłączona, zobacz dedykowaną sekcję.

Statystyki

Gdy zbieranie jest włączone, przeglądarka po zastosowaniu poprawek wysyła anonimowy licznik dla każdego typu poprawki (przez sendBeacon). Liczniki są agregowane dziennie i per sklep: żadnych ciasteczek, żadnych identyfikatorów, żadnych danych osobowych.

Widget po stronie odwiedzającego

Pływający przycisk otwiera panel oferujący:

• Rozmiar tekstu: 5 stopni od 100% do 135%.
• Wysoki kontrast: inteligentny tryb rozjaśniający jednolite tła z zachowaniem obrazów (zobacz poniżej).
• Czytelna czcionka: przełączenie na zestaw Verdana/Arial.
• Zwiększ odstępy: interlinia 1.8, zwiększone odstępy liter i wyrazów (kryterium WCAG 1.4.12).
• Podświetl linki: żółte tło i systematyczne podkreślenie.
• Duży kursor: powiększony kursor o wysokim kontraście.
• Linijka do czytania: pozioma belka podążająca za myszą.
• Zatrzymaj animacje: neutralizuje animacje i przejścia CSS (kryterium WCAG 2.3.3).
• Ukryj obrazy: chowa obrazy, filmy i obrazy tła.
• Resetuj wszystkie ustawienia: powrót do stanu pierwotnego.

Panel jest w pełni obsługiwalny klawiaturą: pułapka fokusa, zamknięcie klawiszem Escape, stany aria-pressed na każdej opcji. Preferencje są przechowywane wyłącznie w localStorage przeglądarki i ponownie stosowane przed pierwszym renderem kolejnych stron: bez wizualnego mignięcia i bez przesyłania danych na Twoje serwery.

Inteligentny wysoki kontrast

W przeciwieństwie do klasycznych widgetów, które wymuszają białe tło na wszystkich elementach (przez co znikają slidery i banery), tryb analizuje DOM przy aktywacji:

• nieprzezroczyste tła o jednolitym kolorze są wybielane;
• elementy z obrazem tła są zachowywane: ich teksty otrzymują półprzezroczystą białą podkładkę gwarantującą czytelność na wizualu;
• teksty stają się czarne, linki ciemnoniebieskie z podkreśleniem, a kontrolki interaktywne dostają czarne obramowanie 2px.

Dezaktywacja usuwa wszystkie zastosowane style i przywraca motyw w niezmienionej postaci.

Automatyczne poprawki w szczegółach

Teksty alternatywne (WCAG 1.1.1)

Dla każdego obrazu bez atrybutu alt moduł stosuje po kolei:

1. jeśli obraz jest w linku zawierającym już tekst: pusty alt (obraz dekoracyjny);
2. w przeciwnym razie podpis figcaption lub atrybut title;
3. w przeciwnym razie tytuł produktu z otaczającej miniatury;
4. w ostateczności oczyszczoną nazwę pliku (zamienione myślniki, usunięte ciągi cyfr), jeśli wynik jest znaczący.

Formularze (WCAG 1.3.1, 4.1.2)

Pola bez powiązanego label, bez aria-label i bez title otrzymują aria-label wywiedziony z placeholdera, a w jego braku ze zhumanizowanej nazwy pola.

Linki i iframe (WCAG 3.2.5, 4.1.2)

Linki target=_blank otrzymują rel=noopener i aria-label uzupełniony o informację „otwiera się w nowym oknie”. Iframe bez tytułu dostają title wskazujący osadzoną domenę.

Struktura i nawigacja (WCAG 1.3.1, 2.4.1, 2.4.7)

Role ARIA są dodawane, gdy motyw ich nie deklaruje, link pomijający jest wstrzykiwany na samym początku strony, a obrys fokusa jest wymuszany na wszystkich elementach interaktywnych przez :focus-visible.

Automatyczna korekta kontrastu (WCAG 1.4.3)

Silnik przechodzi przez widoczne teksty, oblicza względną luminancję tekstu i jego efektywnego tła, a następnie stopniowo przyciemnia lub rozjaśnia kolory, których współczynnik jest niższy niż 4,5. Analiza jest ograniczona do 1500 elementów i wykonuje się przez requestIdleCallback w czasie bezczynności przeglądarki.

Deklaracja dostępności EAA

Publikacja deklaracji dostępności jest formalnym obowiązkiem wynikającym z dyrektywy. W konfiguracji modułu kliknij Wygeneruj stronę deklaracji: strona CMS zostaje utworzona w każdym aktywnym języku sklepu (dołączone szablony FR, EN, ES, DE, IT, z angielskim jako zapasowym dla pozostałych języków), zawierająca:

• stan zgodności z Dyrektywą (UE) 2019/882 i normą EN 301 549;
• listę oferowanych funkcji dostępności;
• kanał zgłoszeń prowadzący do Twojego formularza kontaktowego;
• ścieżki odwoławcze do właściwego organu krajowego.

Link do deklaracji pojawia się automatycznie na dole panelu widgetu. Po aktualizacji modułu lub zmianie nazwy sklepu kliknij Zaktualizuj stronę deklaracji, aby odświeżyć istniejącą stronę bez zmiany jej adresu URL.

Statystyki i dowód należytej staranności

Tabela na stronie konfiguracji wyświetla, za ostatnie 30 dni i według typu, liczbę zastosowanych poprawek: teksty alternatywne, etykiety formularzy, linki zewnętrzne, tytuły iframe, punkty orientacyjne ARIA, linki pomijające i korekty kontrastu. W razie kontroli lub zgłoszenia te liczniki dokumentują wdrożone środki techniczne. Przycisk Resetuj statystyki czyści liczniki bieżącego sklepu.

W multisklep statystyki i deklaracja są zarządzane w kontekście każdego sklepu.

Dobre praktyki i ograniczenia

Moduł koryguje najczęstsze wady techniczne, ale niektóre kryteria WCAG mają charakter redakcyjny i pozostają po Twojej stronie:

• logiczna hierarchia nagłówków h1-h6 w treściach CMS i kartach produktów;
• jakość redakcyjna tekstów alternatywnych kluczowych obrazów;
• napisy do filmów;
• zrozumiałość etykiet przycisków i linków.

Rozwiązywanie problemów

• Przycisk się nie pojawia: sprawdź, czy widget jest włączony, czy hook displayBeforeBodyClosingTag nie jest wyłączony przez motyw, i wyczyść cache PrestaShop (Zaawansowane > Wydajność).
• Preferencje nie są zapamiętywane: odwiedzający prawdopodobnie przegląda w trybie prywatnym albo jego przeglądarka blokuje localStorage; widget pozostaje używalny, tracona jest tylko trwałość ustawień.
• Wysoki kontrast pozostawia niespójny obszar: niektóre elementy wstrzykiwane dynamicznie po załadowaniu (widgety zewnętrzne) umykają analizie. Wyłącz i włącz tryb ponownie albo zgłoś przypadek do supportu z adresem URL.
• Żadne statystyki nie spływają: sprawdź, czy zbieranie jest włączone i czy żaden filtr po stronie serwera nie blokuje zapytań do kontrolera track modułu.

Odinstalowanie

Odinstalowanie usuwa tabelę statystyk i klucze konfiguracji. Strona CMS z deklaracją dostępności jest celowo zachowywana (pozostaje obowiązkiem prawnym): usuń ją ręcznie w Wygląd > Strony, jeśli nie chcesz jej zatrzymać.