Dokumentationsmenu
Tilgængelighed (WCAG)
Tilgængelighed i CookieHug-banneret: dialogsemantik, tastaturbetjening, fokusstyring, skærmlæsere og reduceret bevægelse.
Bannerets tilgængelighed (WCAG)
Samtykkebanneret er ofte det første interaktive element, en besøgende møder — også besøgende, der bruger tastatur eller skærmlæser. CookieHugs banner er designet til at opfylde kriterierne i WCAG 2.1 AA og kan bruges fuldt ud uden mus, uden ekstra opsætning fra din side.
Semantik for hjælpeteknologi
- Banneret er en dialog (
role="dialog") med tilknyttet titel og beskrivelse (aria-labelledby/aria-describedby) — skærmlæsere annoncerer det korrekt, når det åbnes. - I den centrerede placering (med nedtonet baggrund) er banneret markeret som modalt (
aria-modal="true"). - Kategorikontakterne er ægte
checkbox-elementer med etiket — skærmlæsere oplyser kategoriens navn og tilstand. - Foldbare sektioner (kategorier, cookiedetaljer) har
aria-expandedogaria-controls, så den sammenfoldede tilstand altid oplyses. - Dekorative elementer (cookieikonet, pilene) er skjult for skærmlæsere (
aria-hidden). - Beskeden om Global Privacy Control har rollen
status— dens tekst oplæses uden at stjæle fokus.
Tastaturbetjening og fokus
| Tast | Handling |
|---|---|
| Tab / Skift+Tab | Bevæger sig gennem alle bannerets kontroller (knapper, kontakter, foldbare sektioner); i modal tilstand cirkulerer fokus inde i dialogen (fokusfælde) |
| Enter / Mellemrum | Aktiverer knapper, skifter kategorikontakter, folder sektioner og cookiedetaljer ud |
| Esc | Lukker et ikke-modalt banner (beslutningen kan træffes senere via det flydende ikon) |
Fokus styres automatisk: når den besøgende åbner banneret, flyttes fokus ind i dialogen, og ved lukning vender det tilbage til udgangspunktet. Vises et ikke-modalt banner automatisk, tages fokus ikke fra siden. Alle elementer har en synlig fokusmarkering (:focus-visible). Det flydende ikon til at åbne banneret igen er også en knap, der kan nås med tastaturet.
Reduceret bevægelse
Melder den besøgendes system indstillingen prefers-reduced-motion, slås bannerets animationer og overgange fra.
Hvad der er dit ansvar
- Farvekontrast — bannerets farver vælger du selv; hold kontrasten mellem tekst og baggrund på mindst 4,5:1 (WCAG 1.4.3). De medfølgende stilskabeloner overholder denne grænse.
- Enkelt sprog — erstatter du bannerets tekster, så hold dem enkle og fri for fagjargon.
- Bannerets sprog skal matche sidens sprog — SDK'et vælger det automatisk ud fra sidens
lang-attribut, men erstattede tekster skal være skrevet på det rigtige sprog.