Cookies messages are an interesting topic. Because they are now compulsory on (more-or-less) all websites, they’re something that we see an awful lot of, but while they all serve the same broad function, the way they’re implemented and presented varies widely.
This variety in structure, function and complexity makes them very interesting from an accessibility perspective as well – some are more complex than most webpages!
Classic accessibility issues
We see a lot of the same accessibility issues in all kinds of cookies messages – even the most basic often have issues like these:
- The cookies message is not in the keyboard tabbing order at all – this means that screen reader users will not know it exists and will not be able to accept cookies, and sighted keyboard users will be stuck trying to use the website with a (typically intrusive) cookies message over the top
- The message is keyboard operable, but it’s the last thing in the tabbing order after all the page content – this causes the same problems
- The buttons within the cookies message are not labelled clearly or correctly – so screen reader users are not sure how to accept cookies
‘Advanced’ cookies messages
The more advanced cookies messages (where you have full control over all the different types of cookies) offer additional difficulties, as they start incorporating expandable sections/accordions, checkboxes, radio buttons, tabs and other complex elements (not to mention loads of text to wade through). While most users will typically ignore these options and just ‘accept all’, they still need to be compliant with the WCAG guidelines, and many aren’t.
What makes this especially interesting for us as accessibility consultants is that many of these more complex tools are provided by third party suppliers, so we see the same ones, with the same issues, time and time again. Things like:
- Tabs not being implemented properly, so just being announced as links by a screen reader
- Radio buttons or checkboxes not being programmatically associated with their visible labels
- Elements and whole sections not keyboard operable
- Lack of visible focus indicators on interactive elements
- Incorrect focus order through the interactive elements
- Links only identified by colour
- Insufficient contrast of text and interactive elements like checkboxes
- And so on!
A good one!
While we should note that this is not a comprehensive review of all the different tools out there, we do see some third-party tools that do get it right, and have clearly made a serious effort to not just meet the WCAG guidelines, but also to be genuinely, practically accessible.
The one in particular that inspired this blog in the first place is the one provided by Cookiebot, which is a fantastic example (in our opinion!) of the right way to build an accessible, complex cookies tool that allows full understanding and customisation of your consent options.
