Menu dokumentacji

Dostępność (WCAG)

Dostępność banera CookieHug: semantyka dialogu, obsługa klawiatury, zarządzanie fokusem, czytniki ekranu i ograniczony ruch.

Dostępność banera (WCAG)

Baner zgód to często pierwszy interaktywny element, z jakim styka się odwiedzający — także ten korzystający z klawiatury lub czytnika ekranu. Baner CookieHug jest zaprojektowany zgodnie z kryteriami WCAG 2.1 AA i działa w pełni bez myszy, bez dodatkowej konfiguracji po Twojej stronie.

Semantyka dla technologii asystujących

Baner ma rolę dialogu (role="dialog") z powiązanym tytułem i opisem (aria-labelledby / aria-describedby) — czytnik ekranu ogłasza go poprawnie przy otwarciu.
W pozycji „na środku” (z przyciemnionym tłem) baner jest oznaczony jako modalny (aria-modal="true").
Przełączniki kategorii to prawdziwe pola checkbox z etykietami — czytnik odczytuje nazwę kategorii i stan.
Rozwijane sekcje (kategorie, szczegóły cookies) mają aria-expanded i aria-controls, więc stan zwinięcia jest zawsze ogłaszany.
Elementy dekoracyjne (ikona ciasteczka, strzałki) są ukryte przed czytnikami (aria-hidden).
Toaster Global Privacy Control ma rolę status — jego komunikat jest ogłaszany bez przejmowania fokusu.

Obsługa klawiatury i fokus

Klawisz	Działanie
Tab / Shift+Tab	Przechodzenie po wszystkich kontrolkach banera (przyciski, przełączniki, rozwijane sekcje); w trybie modalnym fokus krąży wewnątrz dialogu (focus trap)
Enter / Spacja	Aktywacja przycisków, przełączanie kategorii, rozwijanie sekcji i szczegółów cookies
Escape	Zamyka baner niemodalny (decyzję można podjąć później przez pływającą ikonę)

Fokus jest zarządzany automatycznie: przy otwarciu banera przez użytkownika trafia do dialogu, a po zamknięciu wraca tam, skąd przyszedł. Przy automatycznym pokazaniu banera niemodalnego fokus nie jest odbierany stronie. Każdy element ma widoczny wskaźnik fokusu (:focus-visible). Pływająca ikona ponownego otwarcia również jest przyciskiem dostępnym z klawiatury.

Ograniczony ruch

Gdy system odwiedzającego zgłasza preferencję prefers-reduced-motion, animacje i przejścia banera są wyłączane.

Co pozostaje po Twojej stronie

Kontrast kolorów — kolory banera konfigurujesz samodzielnie; utrzymuj kontrast tekstu do tła co najmniej 4,5:1 (WCAG 1.4.3). Gotowe szablony stylów spełniają ten próg.
Zrozumiałe treści — jeśli nadpisujesz teksty banera, pisz prosto i unikaj żargonu.
Język banera zgodny z językiem strony — SDK dobiera go automatycznie z atrybutu lang strony, ale nadpisane treści muszą być we właściwym języku.