Recently, I needed to update my daytime employer’s home-grown website cookie banner, so I took the opportunity to ensure it was more accessible. Since cookie banners are legally required and designed to immediately capture users’ attention, they often struggle with accessibility challenges that must be addressed carefully. Here are the decisions and steps I made to enhance the banner’s accessibility.
Structuring the Cookie Banner with Semantic HTML
First, I ensured the HTML was properly structured:
- The “Your Personal Information” heading used an
<h3>tag for proper hierarchy. - The “Accept All” button is an actual
<button>element because it performs an action (granting cookie consent). - The “Manage Cookies” button, however, is a link since it takes users to a separate page. I styled it to look like a button while keeping it an
<a>tag for correct semantics.
Handling Keyboard Focus and Navigation
Keyboard accessibility for cookie banners can be tricky. The banner must be noticeable but should not block users from browsing the site if they choose not to interact with it. Here’s how I tackled this:
- I made the cookie banner a region landmark so screen readers can easily find it.
- When the banner appears, keyboard focus moves to it automatically. The cookie banner component is located at the end of the DOM, which is appropriate since it appears at the bottom of the page. Focusing on it right away ensures that it gets appropriate attention from assistive technology users.
- Once the banner is dismissed, keyboard focus returns to the last active element to prevent users from getting lost.
- No keyboard trapping—users can navigate outside the banner without being forced to interact with it.
- I avoided using a modal/dialog box for the banner, as this would prevent users from interacting with the rest of the page until the banner was dismissed.
Improving Visual Clarity and Contrast
To enhance readability and usability:
- The “Privacy Policy” link was previously hard to spot, so I made it bold and underlined to stand out and look like a link.
- I reversed the color scheme between the “Manage Cookies” and “Accept All” buttons to make them visually distinct.
- I ensured that text and background colors met contrast requirements for accessibility.
- The privacy icon containing a checkbox and “X” is purely decorative and has an
alt=""attribute so screen readers will skip it.
Potential Further Accessibility Improvements
While I made significant improvements to the cookie banner’s accessibility, there are still areas that could be enhanced further:
- Simplifying the language – I wish I could have made the banner text shorter and clearer, but our legal team mandated the exact wording. A more user-friendly version would help improve comprehension.
- Enhancing animation and transitions – Smooth transitions when the banner appears and disappears could make the experience feel less jarring, especially for users with cognitive disabilities.
- Adding a “Close” button – A dedicated close button could allow users to dismiss the banner immediately. However, this would require careful decisions about what happens in the background—does clicking it implicitly grant consent? Should the banner reappear on subsequent pages? These considerations need to be addressed to maintain compliance and user control, and I just didn’t have time to think through them.
Conclusion
By ensuring a website’s cookie banner is easy to navigate, understand, and interact with, we create a better and more compliant experience for all visitors. If you’re creating or updating your own cookie banner or selecting one from a third party, I hope my experience can help you think through the process.