WC3 icon. WCAG 2.2 AAA Access by Design Accessible View Tool Bar. It is open, showing a row of buttons that allow users to choose different text sizes, colours and without styling.

The Truth About Overlays

Overlays are often promoted as a fast fix for accessibility, but most fail even basic accessibility testing. An aa checker may spot errors, yet only real users can confirm what truly works. This article explains why overlays often cause harm and what inclusive design does differently.

Overlays are a widely misunderstood part of web design. Some developers use them to add functionality or improve layout, while others believe they can solve complex accessibility issues instantly. However, most overlays fail basic accessibility testing. An aa checker may highlight a few issues, but it cannot verify whether a website truly works for disabled users. In this article, we explain what overlays are, where they fail, and why inclusive design matters more than shortcuts.

What Are Overlays in Accessibility Testing?

An overlay is a graphical element that sits on top of a web page, often used to enhance interactivity or reduce visual clutter. Examples include:

Live chat widgets in the corner of the screen
Image lightboxes that expand when clicked
Sticky menus that follow as you scroll
Pop-up notifications or banners

While these elements can improve usability for some, they often interfere with screen readers and keyboard navigation. This makes them a major concern in accessibility testing.

Why Most Overlays Fail Real Accessibility Testing

There are two types of overlays:

Overlays built into the website’s code
Overlays provided by third-party plugins or services

Third-party overlays, especially those claiming to make a website accessible with just one line of code, are the most problematic. These tools often promote themselves as quick accessibility solutions. Unfortunately, they typically mask issues instead of fixing them. For a thorough breakdown of the risks, see the Overlay Fact Sheet.

In reality, these overlays can make things worse. They interfere with assistive technologies, confuse users, and create a false sense of compliance. No overlay has ever passed a proper accessibility testing process carried out by disabled users. If your site fails an aa checker, adding one of these tools will not help.

Can You Build an Overlay That Passes an AA Checker?

It is possible to create overlays that are accessible — if they are designed and tested with care. Our own website includes an accessibility toolbar built into the native code. It allows users to:

Change foreground and background colours
Adjust text size
Remove styling altogether

These features are designed for visitors who are visually impaired or neurodivergent, and they are tested using screen readers and dictation software. Our in-house accessibility testing team — made up of disabled users — plays a vital role in refining these tools.

We never rely on aa checker tools alone. They can help catch surface-level issues, but true accessibility requires live testing, feedback, and continuous improvement.

Inclusive Design Goes Beyond Overlays

Inclusive design means building a website that meets the needs of all users from the outset. As NNG explains, it is about designing with a full range of human diversity in mind.

However, even the best design cannot serve everyone in the same way. Neurodivergent users, for example, may have opposite preferences for colour contrast or formatting. This is why offering simple, built-in choices through accessible overlays — such as ours — can support more people without relying on plugins or browser settings.

Where Overlays Stand with WCAG and AA Checkers

The WCAG Success Criterion 1.4.8 (Level AAA) recommends giving users a way to adjust foreground and background colours. Our toolbar does exactly that. It also meets the new WCAG 2.2 requirement under 2.5.8 for larger, easier-to-click buttons.

One reason we built this into an overlay is because users with limited dexterity may struggle to zoom using keyboard shortcuts. Our interface removes this barrier entirely.

Still, passing an aa checker is not the goal. Accessibility testing goes far beyond automated tools. Our toolbar was developed hand in hand with our disabled testers to ensure it works in the real world — not just on paper.

Final Thoughts

Most overlays do not make websites accessible. In fact, they can introduce serious usability issues. If you are serious about meeting standards, skip the gimmicks and focus on proper accessibility testing. Build features into your site that genuinely help people — and test them with the people who need them most.

If you want to learn more about how we test sites with disabled users, visit our real user testing page.

Explore how our design process promotes inclusion on our inclusive design principles page.

Watch our breakdown of misleading accessibility claims in Overlays, Hacks And Headlines.

Understand why these tools fail in Why Overlay Tools Are Not the Answer.

We believe every website can be made more inclusive — not through shortcuts, but through thoughtful design, real feedback, and a commitment to doing things right.