Pasek dostępności w PrestaShop: instrukcja konfiguracji

Pasek dostępności i asystent WCAG (EAA / WCAG 2.1 AA). Moduł Accessibility Toolbar & WCAG Helper dodaje do sklepu własny (hostowany na serwerze sklepu) widżet dostępności, stosuje opcjonalne, nieinwazyjne ulepszenia WCAG 2.1 AA, generuje stronę Deklaracji dostępności i zawiera podstawowy audyt WCAG w panelu administracyjnym. Pomaga spełnić wymogi europejskiego aktu o dostępności (EAA). Bez usług podmiotów trzecich, bez kodowania i bez zmian w szablonie.

Moduł Accessibility Toolbar & WCAG Helper dodaje do sklepu własny (hostowany na serwerze sklepu) widżet dostępności, stosuje opcjonalne, nieinwazyjne ulepszenia WCAG 2.1 AA, generuje stronę Deklaracji dostępności i zawiera podstawowy audyt WCAG w panelu administracyjnym. Pomaga spełnić wymogi europejskiego aktu o dostępności (EAA). Bez usług podmiotów trzecich, bez kodowania i bez zmian w szablonie.

1. Instalacja

  1. W panelu administracyjnym (back office) należy przejść do Modules → Module Manager → Upload a module i wybrać plik ZIP modułu.
  2. Po zainstalowaniu należy kliknąć Configure, aby otworzyć ekran ustawień.
Aktualizacje są automatyczne. Aktualizacje są w cenie. Domeny developerskie (.local, .test, localhost) są zawsze dozwolone. Gdy dostępna jest nowa wersja, widać to bezpośrednio w module.

Jeśli zamiast potwierdzenia pojawi się komunikat „Upload failed”, PrestaShop mógł wyłączyć moduł bez powiadomienia: ustawienia i dane pozostają na swoim miejscu. Jak zaktualizować moduł i co zrobić, gdy pojawi się komunikat „Upload failed”.

2. Konfiguracja krok po kroku

Ekran Configure ma trzy zakładki: Settings, Accessibility statement i WCAG audit. Zakładka Settings jest podzielona na poniższe sekcje; każdą z nich można włączyć niezależnie.

Widget

Przycisk dostępności wyświetlany na każdej stronie sklepu. Należy go włączyć i wybrać jego wygląd.

  • Enable accessibility widget: przełącznik włącz/wyłącz dla paska narzędzi w sklepie.
  • Button position: Bottom right, Bottom left, Top right, Top left, Middle right lub Middle left.
  • Button color: kolor pływającego przycisku.
  • Button icon: Wheelchair, Person, Eye lub Contrast.
Widżet
Widget: włączenie i stylizacja przycisku dostępności

Tools

Wybór narzędzi dostępności widocznych w widżecie. Każde ma niezależny przełącznik włącz/wyłącz.

  • Text size: pozwala odwiedzającym powiększać tekst.
  • Text spacing: zwiększa odstępy między literami, słowami i wierszami.
  • Magnify: lupa dla treści pod kursorem.
  • Readable font (dyslexia): przełączenie na krój pisma przyjazny osobom z dysleksją.
  • High contrast: zwiększa kontrast dla osób niedowidzących.
  • Invert colors: odwraca kolory strony.
  • Grayscale: usuwa kolor ze strony.
  • Highlight links: wyróżnia linki.
  • Highlight headings: wyróżnia nagłówki.
  • Big cursor: wyświetla większy kursor myszy.
  • Stop animations: wstrzymuje ruch i animacje.
  • Reading guide: pozioma linijka podążająca za kursorem.
Narzędzia
Tools: wybór funkcji oferowanych przez widżet

Automatic WCAG improvements nieinwazyjne

Opcjonalne poprawki działające w tle, które poprawiają dostępność bez zmieniania szablonu ani treści. Sterują też generowaną Deklaracją dostępności.

  • Skip to content link: dodaje na górze strony klawiaturowy link „przejdź do treści”.
  • Robust focus visibility: sprawia, że obrys fokusu klawiatury jest wyraźnie widoczny.
  • Page lang / ARIA hints: dodaje język strony i podstawowe wskazówki ARIA.
  • Basic landmarks: dodaje podstawowe role punktów orientacyjnych, aby pomóc czytnikom ekranu.
  • Show statement link in widget: wyświetla w widżecie link do strony Deklaracji dostępności.
  • Feedback contact email: adres wyświetlany dla uwag dotyczących dostępności. Puste pole oznacza użycie adresu e-mail sklepu.

Zakładka Accessibility statement służy do edycji wielojęzycznej deklaracji (szablon odwołujący się do EAA, EN 301 549 i WCAG 2.1 AA; puste pole języka oznacza zlokalizowaną wersję domyślną, czyli neutralny wzór, w którym przed publikacją trzeba uzupełnić części w nawiasach kwadratowych: status zgodności, treści niedostępne, kontakt i datę), a zakładka WCAG audit do uruchomienia podstawowego audytu w panelu administracyjnym.

Automatyczne ulepszenia WCAG
Automatic WCAG improvements: nieinwazyjne poprawki i deklaracja

3. Sprawdzenie działania

  • Należy otworzyć sklep i kliknąć przycisk dostępności: pasek narzędzi powinien się otworzyć.
  • Należy włączyć narzędzie, takie jak Text size lub High contrast, i sprawdzić, czy strona się zmienia.
  • Należy otworzyć wygenerowaną stronę Deklaracji dostępności (link w widżecie, jeśli jest włączony).
  • W panelu administracyjnym należy otworzyć zakładkę WCAG audit i uruchomić audyt, aby zobaczyć raport.
Pasek dostępności (sklep)
Pasek dostępności tak, jak widzą go odwiedzający w sklepie

4. FAQ

Czy widżet jest hostowany na serwerze sklepu?

Tak. Wszystkie skrypty i style są serwowane z własnego sklepu: bez usług podmiotów trzecich i bez zewnętrznych wywołań dla paska narzędzi.

Czy gwarantuje zgodność z prawem?

Żadne narzędzie nie może tego zagwarantować. Pomaga spełnić wymogi EAA i WCAG 2.1 AA, ale pełna zgodność wymaga ręcznego przeglądu. Audyt w panelu administracyjnym jest narzędziem pomocniczym, a nie pełnym walidatorem.

Czy zepsuje szablon?

Nie. Automatyczne ulepszenia WCAG są nieinwazyjne: dodają pomocnicze elementy dostępności bez zmiany treści ani układu.

Czy trzeba edytować szablon?

Nie. Moduł działa przez standardowe hooki i jest zgodny z dowolnym szablonem.

🔧 Poznaj moduł i kup go: Pasek dostępności i asystent WCAG (EAA / WCAG 2.1 AA)

Powiązane przewodniki

📚 Wszystkie przewodniki po modułach

Powrót do góry