Accessibility
The banner is part of every page on your site, so it has to meet the same accessibility rules as the rest of the site. In Norway that is WCAG 2.1 level AA under forskrift om universell utforming av IKT. This page says how the banner meets those rules, so you can refer to it in your own accessibility statement.
How it is checked
Every change to the banner script runs an automated check in a real browser before it can be released:
- axe-core checks the WCAG 2.0, 2.1 and 2.2 A and AA rules on every layout (corner, bar, modal, and the sheet phones show) and every layer (first layer, settings, opt-out, notice, settings button).
- The first layer is checked in all 14 languages at phone width, including that no translation makes the banner wider than the screen.
- Keyboard checks confirm that the banner takes focus when it opens, that every button can be reached with Tab, and that focus stays inside the modal layout.
Automated checks do not find every problem. Manual testing with screen readers is still to be done and documented.
What the banner does
| Criterion | How the banner meets it |
|---|---|
| 1.3.1 Info and relationships | The banner is a dialog (role="dialog") named by its title and described by its text. Each category switch is labelled and described by the category text. |
| 1.4.3 Contrast (minimum) | A banner cannot be published with text below 4.5:1 contrast. Accept and reject share size and typography; a reject button that does not stand out from the banner itself (an outlined one) must carry a label that reads at 4.5:1 against the banner. |
| 1.4.10 Reflow | The layouts adapt to a 320 CSS pixel wide screen without scrolling sideways. |
| 2.1.1 Keyboard and 2.1.2 No keyboard trap | Every control works with the keyboard. The modal layout keeps focus inside while it is open, and Escape closes the settings layer without giving consent. |
| 2.4.3 Focus order and 2.4.7 Focus visible | Focus moves to the first choice when a layer opens and returns where it was when the banner closes. Focused buttons have a clear 3 pixel outline. |
| 2.3.3 Animation from interactions | The fade-in only runs when the visitor has not asked for reduced motion. |
| 3.1.2 Language of parts | The banner declares its own language, so screen readers pronounce it correctly when it differs from the page. |
| 4.1.3 Status messages | Confirmations, such as an applied opt-out, are announced without moving focus. |
What stays your responsibility
The colours, texts and position are yours to choose. The publish checks stop the most common contrast problems, but clear wording and a readable privacy policy are up to you. The banner runs in a shadow root, so your site's CSS cannot break it and it cannot break your site.