How Cookie Pop-ups and Screen Readers Work Together

Cookie Popups & Accessibility

“Let us know you agree to advertising cookies”. We’re all familiar with these sort of messages popping up and blocking content when we’re visiting a new website. They are annoying for most people, but are quickly solved by clicking a mouse to either accept or alter your preferences.

However for millions of people who cannot use a mouse (keyboard-only users) or see the screen (screen reader software users), it can be a nightmare to interact with modal dialog pop-ups and this cookie model becomes a huge barrier for them.

People who use keyboard commands or screen reader software rely upon code being in place that allows keyboard access to interact with all elements of a website.

Real Challenge for People with Disabilities

While navigating a website page first time, Ella immediately hears her screen reader announce the title name of the website page. However, there's no indication that a cookie dialog has appeared in the centre of the screen.

A website user with a visual impairment, Ella, explained to us: "I can tell something isn't right because my usual keyboard commands to navigate the page content aren't working as normal, but my screen reader doesn't tell me why."

Here, the cookie dialog is visually present and blocking page interaction. With a lack of proper coding attributes, the cookie modal remains invisible to Ella’s screen reader.

For her, it feels like being told there's a door without being told there's also a hidden wall before reaching that door.

After many attempts moving thought the full webpage, her screen reader prompts “Accept Cookie Button”. Ella was pressing tab repeatedly in hope to find a way to interact with whatever is blocking her page access.

Ella said “Finally, I found something I could interact with, but I had no clue how to alter what I was accepting. Was there a 'decline' option? Were there any other settings? I had no way to know.”

Because the cookie dialogue was not properly implemented in the code, Ella could only interact with the “Accept Cookie” button and not the customise cookie settings, something which other users could easily do.

After several frustrating attempts, Ella felt sceptical about what other content she may excluded from and so, she decided to leave the website altogether, probably never to return.

The Cost of Inaccessible Websites

Ella’s example above illustrates how easy it is to lose customers and possibly also expose business owners and product owners to legal risks.

Users like Ella typically leave websites without making a purchase and are likely to tell others in the disability community about their experiences. In this case an organisation may even face legal complaints.

For business owners, implementing accessible cookie dialogs will offer impactful steps in the digital world to help move towards digital inclusion.

Digitally accessible websites can have better customer reach by improving brand positioning inclusively. It also helps to boost search engine rankings.

By designing a digital friendly accessible website, it is also possible to reduce the need for customer support

Build Inclusive Popups

Ella's example clearly demonstrates why building inclusive pop-ups is so important for people who rely on screen readers. If the website is poorly coded, the screen reader might not recognise or announce the pop-up, making it impossible to proceed.

To overcome this situation, it is essential to use clear ARIA labels to describe the purpose of the pop-up, ensure a logical focus order, implement correct coding, and allow users to close the pop-up using keyboard navigation. With this practices, the benefits are inevitable:

• Making digital content accessible for screen reader users, promotes digital inclusion for everyone & expands your audience.
• This approach helps to focus on all the opportunities which digital accessibility creates. When users feel included, they’re more likely to return.
• A positive experience builds trust and loyalty. It is also often a legal requirement. Plus, it strengthens your reputation as digitally inclusive, forward-thinking brand.

That’s why it’s a “Win-Win Situation” for business owners and their users.

Include Every User

Business owners have the power to shape their digital products to be inclusive and digitally accessible for everyone. By making sure that keeping digital accessibility is at the core of the development lifecycle, the digital world can be inclusive.

By understanding the challenges faced by screen reader users, developers, designers, and business owners can create digital experiences that truly work for everyone.

We know that developing accessible websites is not a simple task that; it involves a comprehensive set of actions and knowledge. For pages that are already live, the effort to detect and resolve issues can be challenging and time-consuming. This is why Nexus Inclusion developed a comprehensive tool that detects, analyses, and provides guidance to support teams creating and maintaining a accessible websites.

With our tool, you can improve screen reader compatibility and more, expanding your audience.  Sign up now and position your brand as a leader in digital inclusion.