Widżet dostępności React

Owijasz aplikację komponentem <AccessibilityProvider token="…">, który ładuje widżet raz dla wszystkich jej widoków. Hook useAccessibility() daje każdemu komponentowi instancję widżetu i informację, czy jest gotowy (ready).

Możliwości widżetu

Odwiedzający otwierają widżet przyciskiem i dopasowują stronę do swoich potrzeb:

• kontrast, kolory i nasycenie,
• rozmiar tekstu, odstępy między znakami i interlinia,
• czcionka dla osób z dysleksją i czytanie na głos,
• wyłączanie animacji i powiększony kursor,
• gotowe profile, m.in. dla osób niewidomych, słabowidzących, z daltonizmem, dysleksją, epilepsją i ADHD.

Prosta konfiguracja

Kod zawiera tylko token strony. Wygląd widżetu, opcje dostępności i deklarację dostępności ustawiasz w koncie DockAccess, więc ich zmiana nie wymaga ponownej edycji kodu.

Prywatność

Widżet nie zbiera danych osobowych odwiedzających. Do zliczania wyświetleń zapisywane są tylko adres IP i user-agent.

Dla odwiedzających

Widżet pojawia się na każdej podstronie aplikacji wewnątrz providera. Odwiedzający otwierają go przyciskiem albo skrótem Ctrl + U, a widżet pamięta ich wybory przy kolejnej wizycie.

Ustawienia w koncie

W koncie DockAccess wybierz stronę z listy Moje strony i otwórz zakładkę Widżet dostępności. Ustawisz tam kolory, położenie i wielkość przycisku (także osobno dla wąskich ekranów), maksymalne powiększenie, dostępne funkcje i profile, własne selektory oraz deklarację dostępności. Podgląd pokazuje zmianę przed zapisaniem, a paczki nie trzeba instalować ponownie.

Domeny i limit

Widżet działa na domenach przypisanych do strony w koncie, więc dodaj tam każdy adres, pod którym działa witryna. Plan darmowy obejmuje 5000 wyświetleń widżetu miesięcznie na wszystkich stronach konta. Po ich wykorzystaniu widżet nie wyświetla się do 1. dnia kolejnego miesiąca albo do aktywacji planu z wyższym limitem.

Sterowanie z kodu

W komponencie const { accessibility, ready } = useAccessibility() daje instancję, gdy ready ma wartość true. Przez nią zmienisz ustawienia, np. setContrast(true), setFontSize(4), setLanguage("pl") czy resetAll(), i nasłuchasz widżetu, np. przez onMenuOpen(). Widżet wysyła też zdarzenia przy zmianie opcji, profilu i języka oraz przy otwarciu i zamknięciu menu; ich listy są w zakładce Artykuły w bazie wiedzy.