Baner CookieZen spełnia wymagania WCAG 2.1 Level A i częściowo Level AA dla dostępności.
Atrybuty ARIA:
-Modal banera:
role="dialog", aria-modal="true", aria-label-Overlay:
aria-hidden="true" (niewidoczny dla czytników ekranu)-Floating popup:
role="dialog", aria-label-Zakładki:
role="tablist", role="tab", aria-selected-Przełączniki kategorii:
role="switch", aria-checked, aria-label-Przyciski zamknięcia:
aria-label="Zamknij"-Ikony kłódki (zawsze włączone):
role="img", aria-label="Zawsze włączone"Nawigacja klawiaturą:
-Tab — przechodzenie między przyciskami i przełącznikami
-Enter/Spacja — aktywacja przycisków i przełączników
-Strzałki ←/→ — nawigacja między zakładkami (Zgoda / Szczegóły / O cookies)
-Focus ring — niebieska obramówka widoczna przy nawigacji Tab
Focus trap:
Gdy baner wyświetla się jako overlay lub popup, fokus klawiatury jest zamknięty wewnątrz modala. Użytkownik nie może tabulatorem przejść do elementów strony za banerem. Po zamknięciu modala fokus wraca do floating buttona.
Shadow DOM:
Baner renderowany jest wewnątrz Shadow DOM, co zapewnia izolację stylów od strony klienta. Focus trap działa poprawnie z Shadow DOM.
Rekomendacje dla klientów:
-Upewnij się, że wybrane kolory banera spełniają WCAG AA (współczynnik kontrastu min. 4.5:1 dla tekstu)
-Unikaj zbyt małych rozmiarów czcionek w konfiguracji (minimum 14px)