Moduł dodaje do sklepu pływający przycisk, za pomocą którego odwiedzający może włączyć dodatkowe ułatwienia dostępności.
Do wyboru są: wysoki kontrast, powiększenie tekstu, podkreślenie odnośników, skala szarości i wyłączenie animacji.
Co robi moduł?
Po zainstalowaniu modułu na stronie pojawia się pływający przycisk. Po jego kliknięciu odwiedzający może wybrać interesujące go ułatwienia.
Dostępne opcje pozwalają między innymi:
- zwiększyć kontrast,
- odwrócić kolory,
- wyłączyć kolory i przełączyć stronę na skalę szarości,
- powiększyć tekst,
- podkreślić wszystkie odnośniki,
- wyraźniej zaznaczyć element, który jest aktualnie wybrany,
- wyłączyć animacje i płynne przewijanie.
Przeglądarka zapamiętuje wybrane ustawienia, więc zostają włączone także na kolejnych stronach sklepu.
Moduł nie tworzy własnej tabeli w bazie danych — ustawienia trzyma w standardowej konfiguracji PrestaShop.
Wymagania
Moduł działa z:
- PrestaShop 1.7,
- PrestaShop 8,
- PrestaShop 9.
Nie wymaga ionCube ani dodatkowych rozszerzeń PHP.
Instalacja
- W panelu sklepu przejdź do Moduły → Menedżer modułów → Wgraj moduł.
- Zainstaluj moduł.
- Przejdź do jego konfiguracji.
- Wybierz pozycję przycisku oraz ułatwienia, które mają być dostępne dla odwiedzających.
Po instalacji sprawdź wygląd sklepu także na telefonie.
Zwróć szczególną uwagę na wybrany róg ekranu. Przycisk może kolidować z innymi elementami, na przykład oknem zgody na cookies albo przyciskiem powrotu na górę strony.
Konfiguracja
Pozycja przycisku
Możesz wybrać jeden z czterech rogów ekranu:
- prawy dół,
- lewy dół,
- prawy góra,
- lewy góra.
Kolor przycisku
Kolor przycisku można ustawić za pomocą kodu HEX, na przykład #1a73e8.
Warto wybrać kolor, który dobrze odróżnia się od tła strony.
Wysoki kontrast
Zwiększa różnicę między tekstem a tłem, więc treść czyta się łatwiej.
Odwrócone kolory
Odwraca kolory strony. Części osób słabowidzących ułatwia to korzystanie ze sklepu.
Skala szarości
Usuwa kolory ze strony i pozostawia ją w odcieniach szarości.
Powiększanie tekstu
Pozwala stopniowo zwiększać rozmiar tekstu na stronie.
Podkreślenie odnośników
Podkreśla odnośniki, dzięki czemu łatwiej rozpoznać je na stronie. Nie trzeba wtedy polegać wyłącznie na kolorze.
Podświetlenie zaznaczenia
Dodaje wyraźne obramowanie wokół elementu, który jest aktualnie zaznaczony, na przykład podczas poruszania się po stronie za pomocą klawiatury.
Zatrzymanie animacji
Wyłącza animacje oraz płynne przewijanie strony.
Czego widżet nie załatwia?
Sam widżet nie sprawia, że sklep jest zgodny z WCAG.
Nie istnieje też widżet, który może automatycznie zapewnić pełną zgodność strony z WCAG. Duża część wymagań dotyczących dostępności musi być spełniona bezpośrednio w kodzie sklepu i jego motywie.
Dotyczy to między innymi:
- opisów alternatywnych zdjęć produktów,
- prawidłowej struktury nagłówków,
- poprawnie opisanych pól formularzy,
- możliwości obsługi całego sklepu za pomocą klawiatury,
- odpowiedniego kontrastu wynikającego z kolorystyki motywu,
- poprawnego działania koszyka i procesu zakupowego,
- komunikatów błędów zrozumiałych również dla użytkowników czytników ekranu.
Widżet ułatwia więc korzystanie ze sklepu części odwiedzających, ale jest uzupełnieniem prac nad dostępnością, a nie ich zamiennikiem.
Audyt WCAG ocenia zresztą cały sklep, a nie samo działanie widżetu.
Rozwiązywanie problemów
Przycisk zasłania inny element
Zmień jego pozycję na inny róg ekranu.
W motywie hummingbird w prawym dolnym rogu może znajdować się na przykład przycisk powrotu na górę strony. Z kolei okno zgody na cookies często znajduje się po lewej stronie.
Ustawienia nie zapamiętują się między stronami
Wybrane ustawienia zapamiętuje przeglądarka odwiedzającego.
Jeżeli korzysta on z trybu prywatnego albo ma zablokowane zapisywanie danych witryn, przeglądarka nie zapamięta ustawień. To jej ograniczenie, nie błąd modułu.
Wysoki kontrast zmienia wygląd strony
Tryb wysokiego kontrastu zmienia kolory używane przez motyw.
Jeżeli motyw korzysta z obrazków zamiast kolorów CSS, moduł nie zawsze zmieni ich wygląd. Trzeba wtedy poprawić sam motyw.