Tjek at din cookie-accept løsning er tilgængelig for skærmlæsere

En del af de løsninger, der bliver brugt på hjemmesider for at overholde cookie-lovgivningen, har problemer i forhold til tilgængelighed.

Som skærmlæserbruger oplever jeg at komme ind på hjemmesider, hvor cookie-accept funktionen er implementeret på en måde, så jeg ikke opdager, at jeg bliver bedt om at tage et valg.

Se her hvordan man som skærmlæserbruger risikerer ikke at tage stilling til, om man vil acceptere cookies eller ej.

 

Den nemme og sikre løsning

Brug en javascript confirmbox til at spørge om brugerens accept. Noget i stil med:
var acceptCookies = confirm("Må vi sætte en småkage??");
Med denne løsning kan du være temmelig sikker på, at de fleste skærmlæserprogrammer i de fleste browsere vil bede brugeren om at tage stilling til cookie spørgsmålet.

Problemet med denne løsning er, at det ikke ser helt så elegant ud, som man ofte gerne vil have det til.

Den pænere løsning

De fleste vælger en løsning, der visuelt virker mere elegant. Det går ud på, at man vha. en kombination af html, javascript og CSS bygger en dialogboks direkte i html-koden. Fx. ved at style et DIV element, så det kommer til at ligne en dialogboks, der ligger som et overlay på resten af siden. Det er den type løsning, der bliver benyttet i videoen ovenfor.

Her er der et par ting du skal være opmærksom på i forhold til tilgængeligheden: Et skærmlæserprogram læser normalt hjemmesiden i DOM-rækkefølge. Dvs. at det, der ligger først i HTML-koden, er det første der bliver læst op. Du bør derfor sørge for, at HTML-elementet, der udgør dialogboksen, ligger først i DOM-rækkefølgen. På den måde bliver skærmlæserbrugeren hurtigt opmærksom på, at boksen er der.

I eksemplet i videoen er cookie-accept boksen det absolut sidste skærmlæserprogrammet læser op på siden. Det er ikke realistisk, at brugeren nogensinde læser så langt.

Det er også væsentligt at sørge for, at tastaturfokus flyttes ind i cookie-accept boksen, samt at det forbliver der, indtil brugeren har truffet sit valg. Tjek om dit tastaturfokus bliver inde i boksen, når du tabulerer. Det, der ofte sker, er, at fokus flytter udenfor boksen, og at det så er umuligt, at komme tilbage til den.

Når du skal lave en tilgængelig dialog boks, bør du se nærmere på mulighederne i WAI-ARIA. Det er en samling teknikker, der bruges til at gøre dynamiske hjemmesider mere tilgængelige. Her er en artikel, der nærmere beskriver, hvordan forskellige dialogbokse gøres tilgængelige med ARIA. (link til ekstern side) Der er stadig meget forskel på, hvor godt forskellige browsere og skærmlæserprogrammer understøtter WAI-ARIA. Så du bør altid teste, om det, du har lavet, fungerer i praksis.

Tilbage