Docs menu
Accessibility (WCAG)
CookieHug banner accessibility: dialog semantics, keyboard support, focus management, screen readers and reduced motion.
Banner accessibility (WCAG)
The consent banner is often the first interactive element a visitor meets — including visitors using a keyboard or a screen reader. The CookieHug banner is designed to meet WCAG 2.1 AA criteria and is fully usable without a mouse, with no extra configuration on your side.
Semantics for assistive technology
- The banner is a dialog (
role="dialog") with a linked title and description (aria-labelledby/aria-describedby) — screen readers announce it correctly on open. - In the centred position (with a dimmed backdrop) the banner is marked modal (
aria-modal="true"). - Category toggles are real
checkboxinputs with labels — screen readers announce the category name and state. - Expandable sections (categories, cookie details) carry
aria-expandedandaria-controls, so the collapsed state is always announced. - Decorative elements (the cookie icon, chevrons) are hidden from screen readers (
aria-hidden). - The Global Privacy Control toaster has the
statusrole — its message is announced without stealing focus.
Keyboard support and focus
| Key | Action |
|---|---|
| Tab / Shift+Tab | Moves through all banner controls (buttons, toggles, expandable sections); in modal mode focus cycles inside the dialog (focus trap) |
| Enter / Space | Activates buttons, flips category toggles, expands sections and cookie details |
| Escape | Closes a non-modal banner (the decision can be made later via the floating icon) |
Focus is managed automatically: when the visitor opens the banner it moves into the dialog, and on close it returns to where it came from. When a non-modal banner shows automatically, focus is not taken away from the page. Every element has a visible focus indicator (:focus-visible). The floating reopen icon is a keyboard-accessible button as well.
Reduced motion
When the visitor's system reports the prefers-reduced-motion preference, banner animations and transitions are disabled.
What stays on your side
- Colour contrast — you configure the banner colours yourself; keep text-to-background contrast at least 4.5:1 (WCAG 1.4.3). The built-in style templates meet this threshold.
- Plain language — if you override banner texts, keep them simple and jargon-free.
- Banner language matching the page language — the SDK picks it automatically from the page's
langattribute, but overridden texts must be written in the right language.