Varför tillgänglighet och samtycke nu överlappar

GDPR kräver att samtycke ska kunna inhämtas från varje användare, inte bara de som kan se och klicka på en banner. European Data Protection Board har klargjort att om ett registrerat inte meningsfullt kan interagera med samtycksgränssnittet — på grund av en funktionsnedsättning som webbplatsen inte har anpassats till — är samtycket inte giltigt inhämtat. Det innebär att cookies aldrig borde ha laddats.

På tillgänglighetssidan gör European Accessibility Act (EAA), som har genomförts i nationell lagstiftning i EU:s medlemsstater, WCAG 2.1 AA till minimum för webbplatser och appar i privat sektor som erbjuder konsumenttjänster. Sanktionssystemet varierar per land men sträcker sig vanligtvis från 50 000 € till 500 000 € per överträdelse, plus marknadsåtertagandeorder vid ihållande bristande efterlevnad.

De centrala WCAG-kraven för cookiebanners

Tangentbordshantering

Varje bannerkontroll — Acceptera, Avvisa, Hantera inställningar, stäng — måste vara nåbar och hanterbar med enbart tangentbordet. Användare ska kunna tabba igenom knapparna i logisk ordning och aktivera dem med Enter eller Space. Fokus måste vara synligt med ett minimalt kontrastförhållande på 3:1 mot bakgrunden.

Fokusfångst i modala banners

Om bannern blockerar interaktion med resten av sidan måste tangentbordsfokus fångas inuti bannern tills användaren gör ett val. Användare ska inte kunna tabba ut ur bannern för att scrolla på den underliggande sidan. När fokus var fångat och bannern stängs ska fokus återvända till elementet som utlöste bannern eller till ett lämpligt standardvärde.

Skärmläsarmeddelanden

Bannern måste annonseras som en dialog med ett tillgängligt namn och roll. Använd role="dialog" eller role="alertdialog" med aria-labelledby som pekar på bannerns rubrik och aria-describedby som pekar på den förklarande texten.

Färgkontrast

Brödtext måste uppfylla 4,5:1 kontrast mot bakgrunden; stor text (18pt+ eller 14pt fetstil) kräver 3:1. Knapptext, ikoner och fokusindikatorer har alla sina egna kontrastminimum. En ljusgrå "Avvisa"-knapp på vit bakgrund är ett vanligt WCAG-misslyckande vi ser i revisioner.

Inga färgbaserade signaler

Förlita dig inte enbart på färg för att skilja Acceptera från Avvisa. Använd distinkta etiketter, ikoner eller former så att användare med färgblindhet kan skilja knapparna åt.

Mörka mönster och tillgänglighet

WCAG 2.2 introducerar nya kriterier som direkt riktar sig mot mörka mönster — särskilt relevanta för samtycke:

• 3.3.8 Tillgänglig autentisering — förbjuder kognitiva pussel som samtycksfriktion.
• 3.3.7 Redundant inmatning — användare ska inte behöva ange information igen bara för att återkalla samtycke.
• 2.4.11 Fokus inte dold — bannern själv ska inte dölja fokustatorn för element bakom den.
• 2.5.7 Dragningsrörelser — om din banner använder en dra-för-att-acceptera-interaktion måste ett alternativ med en pekare finnas.

RTL och internationalisering

Tillgänglighet sträcker sig till höger-till-vänster-språk (arabiska, hebreiska, persiska, urdu) och till skärmläsarens uttal:

• Ange dir="rtl" på bannern när dokumentspråket är RTL så att knappordning och fokusflöde matchar läsriktningen.
• Använd korrekta lang-attribut på översatt bannertext så att skärmläsare uttalar ord med rätt fonetik.
• Spegla ikonografi — vinkelparentes, pilar och framstegsindikatorer ska vändas för RTL-lokaler.

Testa din banner för WCAG-efterlevnad

Förlita dig inte på ett enda verktyg. Kombinera automatiserad skanning med verklig hjälpmedelstestning:

• axe DevTools eller Lighthouse — fångar ungefär 30-40% av WCAG-misslyckanden automatiskt.
• NVDA eller JAWS på Windows, VoiceOver på Mac/iOS, TalkBack på Android — testa med riktiga skärmläsare. Kan bannern annonseras, navigeras och stängas med enbart skärmläsaren?
• Navigering enbart med tangentbord — koppla ur musen. Om du inte kan Acceptera, Avvisa och hantera inställningar kan inte heller tangentbordsanvändare det.
• Färgblindhetssimulering — Chrome DevTools har inbyggda synnedsättningssimulatorer. Kontrollera att Acceptera och Avvisa är åtskiljbara under protanopi, deuteranopi och tritanopi.
• Zoom till 400% — WCAG kräver att innehåll förblir användbart vid 400% zoom utan horisontell scrollning. Banners med fast position misslyckas ofta med det här testet.

Vanliga tillgänglighetsmisslyckanden vi ser

• Dold Avvisa bakom en kugghjulsikon — mörkt mönster plus tillgänglighetsmisslyckande (inget tillgängligt namn på ikonknappen).
• Fokus når aldrig bannern — banners som stjäl visuell uppmärksamhet men hoppas över i tabbordningen.
• Modal banner utan fokusfångst — användare kan tabba in på bakgrundssidan medan bannern påstår sig blockera interaktion.
• Ingen aria-live vid inställningsändringar — skärmläsaranvändare hör inte bekräftelse på att deras val sparades.
• Översatta banners utan lang-attribut — skärmläsare uttalar spansk text med engelsk fonetik.

Hur FlexyConsent levererar tillgänglighet