Accessibility, CSS tricks, & Web Development Articles by Me!

Bluesky Mastodon

Give Me Feedback!

I'm not an expert nor good at writing, I make mistakes! Let me know if there's anything wrong, I'm still learning :)

Built without AI.

Should you use an Accessibility Overlay?

The answer is No! Here's why.

  • Automation
  • Accessibility
Userway overlay screenshot with a question mark

What are they?

Accessibility Overlays are something you strap onto your website, and tries to… fix the accessibility of it! Usually claiming or aiming to meet WCAG AA 2.1 compliance (or newer), as it is the current legal standard. Not complying with the standard has the possibility of getting your company sued! So, Accessibility Overlays should be a quick-and-easy solution…

right?

No! They aren’t a quick-and-easy solution.

A lot of the time these automated tools can not automatically fix your website. These claims of fixing your website accessibility in a few lines of code are unrealistic. Every website is different, no tool is perfect… and in most cases can make things worse or get in the way of the user.

There have been issues in the past where a company has been sued for an overlay not actually making their website accessible, then the company sued said overlay!

But do Accessibility Overlays actually help?

They might be helpful to users who are not already familiar with other tools that can be applied everywhere. Screen readers are usually operating-system-wide, and screen reader software provide many other tools to be able to easily navigate a page. The user’s operating system itself will provide many accessibility tools like the Narrator, screen magnification, high contrast modes, text size, text-to-speech, etc.

For instance, Windows has a directory of all their accessibility features listed here. And AbilityNet allows you to search for how to make any device easier to use.

If someone really does need a tool provided by an Accessibility Overlay, there are other solutions that provide the same features, and can work across all websites. For example, one browser extension I’ve found, HelperBird, provides many of the same features. I cannot say whether this extension is good or not, however it is an option.

So what I’m saying is, even if your website is already accessible, and you think an Accessibility Overlay can be helpful… it can be at best redundant, get in the way of tools the user may already be using, and use up more of the user’s data/resources (as it is yet another thing that needs to be loaded onto your website). And at times these overlays can hurt performance as it tries to “repair” the HTML.

The Overlay Fact Sheet goes a lot more into detail about Accessibility Overlays, and the issues they have caused users. And has been signed by many accessibility experts.

What to do instead

If your website is already accessible and meets the WCAG, then great! You do not need to do anything and you do not need to add anything else! It is important to note, that as you maintain your website, you also need to maintain your site’s accessibility. Make sure testing accessibility is part of your workflow!

However, if your website is not accessible… you would make better use of your money long-term and create a better experience for everyone by not paying accessibility overlays, and instead getting help from accessibility experts. Or, there are a few things you can do yourself:

  • Try starting with automated tools like WAVE and Lighthouse

    • These can help find accessibility issues, and point you in the right direction to figure out how to fix them.

  • Can you navigate the website with only your keyboard?

    • Are you able to clearly see where you are and what you are highlighting.

    • If you can’t, you may need to edit the stylesheet to make sure that focus outlines are clearly visible, like so:

      An article card showing a white focus ring appearing around the article title showing that it is currently selected.
      • Keep in mind that the outline is styled differently across browsers.
        Or, you can try making a custom outline with :focus-visible

    • Are things in the logical order?

      • Make sure the HTML is in logical order, and try not to change that order in your stylesheet.

  • Try using a Screen Reader to navigate your website.

    • On Windows, you can enable the screen reader with ctrl+super+enter, they provide a step-by-step tutorial on how to navigate with a screen reader.

  • Make sure to mark proper landmarks in the HTML with Semantic HTML elements.