How Cookie Pop-ups and Screen Readers Work Together

Cookie Popups & Accessibility

We’ve all have encountered Cookie pop-up windows and all sighed at how annoying they can be! Often when you open a website, you cannot proceed without interacting with a Cookie pop-up. Collectively, modal dialogs are not just cookie pop-ups, but they can also be “Subscribe now”, “Special offer” and chat bot pop-up windows, which are referred as below in the images.

This suddenly appearing a cookie consent dialogue pop-up needs your quick attention. They are annoying for most people, but soon 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.

As a developer, they need to focus on the code being in place to allow keyboard & screen readers users to use website inclusively. When it comes to our example of Cookie pop-ups, keyboard & screen reader users can be locked out from the start when trying to visit a website!

Ella's Cookie Struggle

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 center of the screen.

Ella explained, "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 skeptical about what other content she may excluded from and so, she decided to leave the website altogether, probably never to return.

Business Accessibility Costs

From 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, rejected your site in the form of product, without making any purchase and likely to tell others in the disability community about her experience. In this case an organisation may face legal complaints.

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

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

To develop the code for our example of a cookie modal, first imagine opening a new website and being blocked by a cookie pop-up that you can’t skip.

Now, picture being visually impaired and relying on a screen reader to navigate the site. If the website is poorly coded, the screen reader might not recognize or announce the pop-up, making it impossible to proceed.

To overcome this, here is a step-by-step guide of how to ensure modal dialog are accessible to make websites inclusive of everyone:

1. An important first step to assist visually impaired people to hear that a modal dialog has indeed popped-up on their screen, is to use ARIA to give the dialog container an identity using role="dialog" (with aria-modal set to "true").

2. It is recommended to use aria-labelledby to describe the purpose of the pop-up, thereby associating the dialog’s heading with the dialog.

3. Good focus order is essential. Keyboard navigation / hand swipe gestures on responsive devices should allow a person to proceed in a logical order through all parts of the modal content from beginning to end. When focus order is broken, content can be skipped or announced in the wrong sequence which can mean a person has no idea what is going on.

4. A common problem is the user thinks they are navigating inside the modal pop-up, but they are unaware they have moved beyond the pop-up (which is still open) into the main webpage content. That can be incredibly confusing! To prevent this, code should be written to maintain focus inside the modal pop-up until the user deliberately chooses to close the pop-up. Doing that will mean the user always knows what is going on & where they are.

5. When a user chooses to, it is essential they can bring focus onto a dedicated close button (or alternatively be allowed to use their keyboard Esc key), so that they do not become stuck in a keyboard trap. The dreaded “keyboard trap” is a worst-case scenario because it causes people to become stuck in a loop inside the modal dialog, which in turn means they are completely prevented from accessing the website itself.

6. After closing a modal pop-up, code should make focus automatically land on the part of the webpage that is most relevant to the user.

This is important to ensure the user doesn’t next hear some random part of the webpage & misunderstand that is the first part of where they should be.

Accessibility Benefits All

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.

With Nexus Inclusion let's prioritise screen reader compatibility and expand your audience. 

 Let’s position your brand as a leader in digital equality.