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

> DF Accessibility dostosowuje sklep PrestaShop do europejskiego aktu w sprawie dostępności (EAA, dyrektywa (UE) 2019/882) za pomocą trzech elementów: widżetu dostępności, którego opcje wybierasz, silnika automatycznych poprawek WCAG działającego na…

- Strona: <https://www.datafirefly.com/pl/documentation/dfaccessibility/>
- Język: pl
- Zaktualizowano: 2026-10-12
- Inne języki: [fr](https://www.datafirefly.com/documentation/dfaccessibility/index.md), [en](https://www.datafirefly.com/en/documentation/dfaccessibility/index.md), [es](https://www.datafirefly.com/es/documentation/dfaccessibility/index.md), [de](https://www.datafirefly.com/de/documentation/dfaccessibility/index.md), [it](https://www.datafirefly.com/it/documentation/dfaccessibility/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfaccessibility/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfaccessibility/index.md)
- Indeks: <https://www.datafirefly.com/pl/documentation/llms.txt>

DF Accessibility dostosowuje sklep PrestaShop do europejskiego aktu w sprawie dostępności (EAA, dyrektywa (UE) 2019/882) za pomocą trzech elementów: widżetu dostępności, którego opcje wybierasz, silnika automatycznych poprawek WCAG działającego na każdej stronie oraz generatora prawnej deklaracji dostępności w 8 językach.

Ta dokumentacja dotyczy wersji **1.3.0** modułu, zgodnej z PrestaShop **8.0.0 do 9.x**. Bez nadpisań klas, bez zależności Composer, bez zewnętrznych żądań.

## Instalacja i aktualizacja

1. W panelu PrestaShop otwórz **Moduły > Menedżer modułów**.
2. Kliknij **Załaduj moduł** i upuść plik `dfaccessibility.zip`.
3. Po zakończeniu instalacji kliknij **Konfiguruj**.

Moduł rejestruje się na hookach `displayHeader`, `actionFrontControllerSetMedia`, `displayBeforeBodyClosingTag` i `displayFooter` (ostatni służy jako zapas dla motywów, które nie wywołują poprzedniego) i tworzy tabelę statystyk. Zaraz po instalacji widżet działa ze wszystkimi opcjami, a wszystkie automatyczne poprawki są włączone, z wyjątkiem korekty kontrastu.

Aby zaktualizować, po prostu wgraj nowy plik ZIP na zainstalowany moduł, bez odinstalowywania: skrypty aktualizacji dodają nowe ustawienia i zachowują Twoją konfigurację.

## Konfiguracja

### Widżet dostępności

- **Włącz widżet**: wyświetla pływający przycisk w sklepie. Wyłączenie widżetu kończy też stosowanie preferencji zapisanych wcześniej przez odwiedzających.
- **Położenie przycisku**: na dole po prawej lub na dole po lewej.
- **Kolor akcentu**: używany dla przycisku, aktywnych opcji panelu i wymuszonego obramowania fokusu. Wybierz kolor o wystarczającym kontraście z bielą (domyślny niebieski `#2563EB` spełnia współczynnik AA).
- **Ukryj przycisk na urządzeniach mobilnych**: ukrywa pływający przycisk poniżej 768px.
- **Ukryj przycisk w koszyku i podczas składania zamówienia**: usuwa przycisk ze stron koszyka i zamówienia, także w modułach zamówienia na jednej stronie, które zachowują nazwę strony `order`.
- **Opcje widoczne w widżecie**: jedno pole wyboru na opcję (rozmiar tekstu, wysoki kontrast, czytelna czcionka, odstępy, wyróżnianie linków, duży kursor, linijka do czytania, zatrzymanie animacji, ukrywanie obrazów). Gdy żadna opcja nie jest zaznaczona, pływający przycisk jest ukryty.

Gdy przycisk jest ukryty na urządzeniach mobilnych, w koszyku lub podczas składania zamówienia, preferencje już włączone przez odwiedzającego i automatyczne poprawki nadal działają. Odwiedzający w trybie wysokiego kontrastu pozostaje w nim aż do płatności.

Odznaczona opcja przestaje działać także u odwiedzających, którzy już ją włączyli. To celowe: bez przycisku odwiedzający nie mógłby jej wyłączyć.

### Automatyczne poprawki

Każdą poprawkę można włączyć osobno. Działają w przeglądarce odwiedzającego podczas ładowania strony i na treściach dodanych później: pliki motywu nigdy nie są modyfikowane.

- **Brakujące teksty alternatywne**: szczegóły poniżej.
- **Pola formularzy bez etykiety**: dodaje `aria-label` na podstawie placeholdera lub nazwy pola.
- **Linki otwierające nowe okno**: dodaje `rel=noopener` i słyszalne ostrzeżenie dla czytników ekranu.
- **Ramki iframe bez tytułu**: dodaje atrybut `title` na podstawie domeny źródłowej.
- **Punkty orientacyjne ARIA**: dodaje role `banner` i `contentinfo` oraz `aria-label` nawigacji, jeśli ich brakuje.
- **Link pomijania**: dodaje link „Przejdź do treści głównej" widoczny po pierwszym naciśnięciu Tab.
- **Widoczne obramowanie fokusu**: wymusza obramowanie przy fokusie klawiatury (kryterium WCAG 2.4.7).
- **Automatyczna korekta kontrastu**: domyślnie wyłączona, patrz osobna sekcja.

### Statystyki

Gdy zbieranie jest włączone, każda przeglądarka sumuje zastosowane poprawki i wysyła je najwyżej raz na minutę, przy zamykaniu lub opuszczaniu strony. Liczniki są agregowane dziennie dla każdego sklepu: bez cookie, bez identyfikatora, bez danych osobowych.

## Widżet z perspektywy odwiedzającego

Pływający przycisk otwiera panel z zaznaczonymi przez Ciebie opcjami:

- **Rozmiar tekstu**: 5 kroków od 100 do 150 %.
- **Wysoki kontrast**: inteligentny tryb opisany poniżej.
- **Czytelna czcionka**: przełącza na Verdana, Tahoma, Arial.
- **Zwiększ odstępy**: litery 0,12 em, słowa 0,16 em, interlinia 1,6 i 2 em między akapitami, czyli wartości testowe kryterium WCAG 1.4.12.
- **Wyróżnij linki**: żółte tło i stałe podkreślenie.
- **Duży kursor**: powiększona strzałka i powiększona dłoń nad linkami i przyciskami.
- **Linijka do czytania**: pozioma belka podążająca za myszą.
- **Zatrzymaj animacje**: wyłącza animacje i przejścia CSS, wstrzymuje automatycznie odtwarzane wideo oraz karuzele Bootstrap, Swiper, Slick i Owl (kryteria WCAG 2.2.2 i 2.3.3).
- **Ukryj obrazy**: ukrywa obrazy, wideo i obrazy w tle.
- **Przywróć wszystkie ustawienia**: powrót do stanu początkowego.

Panel jest w pełni obsługiwany klawiaturą: pułapka fokusu, zamykanie klawiszem Escape, stany `aria-pressed` przy każdej opcji. Preferencje są zapisywane wyłącznie w `localStorage` przeglądarki i stosowane ponownie **przed pierwszym wyświetleniem** kolejnych stron, bez migania i bez wysyłania danych na Twoje serwery.

Czcionki ikon (Material Icons w motywie Classic, Font Awesome) są wyłączone z czytelnej czcionki i odstępów, aby ikony nigdy nie zamieniały się w tekst.

### Rozmiar tekstu

Moduł powiększa rozmiar główny strony, zaczynając od wartości ustawionej przez motyw, dzięki czemu rosną wszystkie teksty w `rem` i `em`, także w motywach z korzeniem 62,5 %. Teksty określone w pikselach, które nie zależą od korzenia, są powiększane pojedynczo. Każdy tekst jest powiększany tylko raz, niezależnie od jednostki.

### Inteligentny wysoki kontrast

Typowe widżety wymuszają białe tło i pełną nieprzezroczystość wszystkich elementów, przez co znikają grafiki sliderów, a pojawiają się ukryte slajdy, zwinięte menu i tła okien modalnych. Tutaj moduł analizuje całą stronę, partiami, aby jej nie zamrozić:

- **jednolite** tła i **gradienty** stają się białe;
- elementy z **obrazem w tle** oraz podpisy nałożone na obraz slidera zostają zachowane: ich teksty dostają półprzezroczystą białą płytkę;
- teksty stają się czarne, linki ciemnoniebieskie i podkreślone (żółte po najechaniu), przyciski i pola dostają białe tło i czarną ramkę 2px;
- nic, co motyw ukrywa, nie pojawia się ponownie.

Wymuszone kolory działają dopiero po zakończeniu analizy, aby podczas ładowania nie pojawił się czarny tekst na ciemnym tle. Wyłączenie przywraca oryginalne style, w tym style inline z kreatora stron.

### Na urządzeniach mobilnych

Poniżej 768px przycisk ma 44px (rozmiar celu dotykowego z kryterium WCAG 2.5.5) i znajduje się 14px od krawędzi. Panel zajmuje szerokość ekranu, do 320px.

## Automatyczne poprawki w szczegółach

### Teksty alternatywne (WCAG 1.1.1)

Dla każdego obrazu bez atrybutu `alt` moduł stosuje kolejno:

1. obraz ukryty przed technologiami wspomagającymi, piksel śledzący lub obraz w linku, który ma już tekst: pusty `alt` (obraz dekoracyjny);
2. w przeciwnym razie podpis `figcaption` lub atrybut `title`;
3. w przeciwnym razie nazwę produktu z otaczającej miniatury;
4. w ostateczności oczyszczoną nazwę pliku, jeśli ma sens.

Jeśli żadne z tych źródeł nie jest wiarygodne, obraz pozostaje bez zmian, zamiast błędnie ukrywać go przed czytnikami ekranu pustym `alt`.

Automatyczna poprawka to siatka bezpieczeństwa. Dla ważnych zdjęć produktów pisz teksty alternatywne ręcznie w katalogu: moduł nigdy nie zmienia istniejących atrybutów `alt`.

### Formularze (WCAG 1.3.1, 4.1.2)

Pola bez powiązanego `label`, bez `aria-label` i bez `title` otrzymują `aria-label` na podstawie placeholdera lub, w razie jego braku, nazwy pola.

### Linki i ramki iframe (WCAG 3.2.5, 4.1.2)

Linki `target=_blank` otrzymują `rel=noopener` i `aria-label` uzupełniony o „otwiera się w nowym oknie". Ramki iframe bez tytułu otrzymują `title` z nazwą osadzonej domeny.

### Struktura i nawigacja (WCAG 1.3.1, 2.4.1, 2.4.7)

Role ARIA są dodawane, gdy motyw ich nie deklaruje, link pomijania trafia na sam początek strony, a obramowanie fokusu jest wymuszane przez `:focus-visible`. W motywie Classic, gdzie znacznik `

` obejmuje także nagłówek i stopkę, link pomijania prowadzi do kolumny treści `#content-wrapper`. Jeśli motyw ma już link pomijania, moduł nie dodaje drugiego.

### Automatyczna korekta kontrastu (WCAG 1.4.3)

Silnik oblicza luminancję względną każdego tekstu i jego rzeczywistego tła, a następnie stopniowo przyciemnia lub rozjaśnia kolory poniżej wymaganego współczynnika: 4,5 lub 3 dla dużego tekstu (24px albo 18,66px pogrubione). Działa w czasie bezczynności przeglądarki.

Teksty na obrazie, gradiencie, półprzezroczystym tle lub w sliderze są pomijane: ich rzeczywistego tła nie da się obliczyć, a korekta mogłaby pogorszyć czytelność. Pomijane są też teksty nieaktywne.

Ta poprawka zmienia kolory tekstu zdefiniowane w motywie. Włącz ją, sprawdź wygląd najważniejszych stron i zostaw, jeśli wynik Ci odpowiada. Z tego powodu jest domyślnie wyłączona.

### Treści ładowane po stronie

Poprawki obejmują też treści wstawiane po załadowaniu: listy produktów filtrów fasetowych, szybki podgląd, okno dodania do koszyka, nieskończone przewijanie. Wysoki kontrast i rozmiar tekstu są tam stosowane w ten sam sposób.

## Deklaracja dostępności EAA

Publikacja deklaracji dostępności to formalny obowiązek dyrektywy. W konfiguracji modułu kliknij **Wygeneruj stronę deklaracji**: strona CMS zostanie utworzona w każdym języku sklepu (szablony FR, EN, ES, DE, IT, NL, PL i PT w zestawie, angielski jako zapas dla innych języków), z:

- statusem zgodności z dyrektywą (UE) 2019/882 i normą EN 301 549;
- listą dostępnych funkcji ułatwień dostępu;
- kanałem zgłoszeń prowadzącym do formularza kontaktowego, w języku strony;
- procedurą odwoławczą do właściwego organu krajowego.

Link do deklaracji pojawia się automatycznie na dole panelu widżetu, tylko jeśli strona istnieje i jest aktywna. Po aktualizacji modułu lub zmianie nazwy sklepu kliknij **Zaktualizuj stronę deklaracji**: potwierdzenie ostrzega, że ręczne zmiany zostaną zastąpione, po czym strona jest aktualizowana bez zmiany adresu URL.

## Statystyki i dowód należytej staranności

Tabela na stronie konfiguracji pokazuje, za ostatnie 30 dni i według typu, liczbę zastosowanych poprawek: teksty alternatywne, etykiety formularzy, linki zewnętrzne, tytuły ramek iframe, punkty orientacyjne ARIA, linki pomijania i korekty kontrastu. W razie kontroli lub skargi liczniki dokumentują wdrożone środki techniczne. Przycisk **Wyzeruj statystyki** czyści liczniki bieżącego sklepu.

W multistore statystyki i deklaracja są obsługiwane osobno dla każdego sklepu.

## Dobre praktyki i ograniczenia

Moduł naprawia najczęstsze błędy techniczne, ale niektóre kryteria WCAG mają charakter redakcyjny i pozostają w Twoich rękach:

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

Żadne narzędzie automatyczne nie czyni strony „w 100% zgodną". Moduł daje solidną, udokumentowaną bazę techniczną; uzupełnij ją redakcyjnym przeglądem najważniejszych stron.

## Rozwiązywanie problemów

- **Przycisk się nie pojawia**: sprawdź, czy widżet jest włączony, czy zaznaczono co najmniej jedną opcję i czy nie jesteś na stronie, na której jest ukryty (urządzenie mobilne, koszyk, zamówienie), a następnie wyczyść pamięć podręczną PrestaShop (Zaawansowane > Wydajność).
- **Opcja zniknęła u odwiedzającego**: została odznaczona w konfiguracji, co usuwa też zapisaną preferencję.
- **Preferencje nie są zapamiętywane**: odwiedzający prawdopodobnie korzysta z trybu prywatnego lub jego przeglądarka blokuje `localStorage`; widżet działa, traci się tylko zapamiętywanie.
- **Obszar pozostaje ciemny w wysokim kontraście**: element zmienia tło później za pomocą skryptu (np. przyklejony nagłówek ciemniejący przy przewijaniu). Wyłącz i włącz tryb ponownie lub zgłoś przypadek do wsparcia z adresem URL.
- **Instalacja lub aktualizacja się nie udaje**: wgraj najnowszy plik ZIP na moduł, bez odinstalowywania. Wersje przed 1.2.1 mogły zakończyć się błędem „Undefined array key DFACCESS_WIDGET_OPTIONS".
- **Nie docierają statystyki**: sprawdź, czy zbieranie jest włączone i czy żadna zapora nie filtruje żądań do kontrolera `track` modułu. Liczniki przychodzą partiami, z możliwym kilkuminutowym opóźnieniem.

## 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 zachować.