Accessibility overlays: common sense and nonsense.

“Help! My website’s not accessible to people with disabilities!” 

“Oh, no problem. Just add a line of code to your website and Bob’s your uncle: your site’s fully accessible.” 

Sounds too good to be true? That’s because it is. It’s not even remotely possible. That said, there is functionality out there that can help your visitor. 

In this article, Eva Westerhoff and Rian Rietveld explain why that “extra line of code” doesn’t solve the problem, what an overlay is, and what the difference is between offering extra help to your visitor and overlays for “fixing” errors. 

We hope this will give you a better understanding of which features will help visitors, including those with disabilities, and which won’t. 

A quick fix for an inaccessible website?

A so-called accessibility overlay is a widget—a button you can add to a web page to improve accessibility, or to fix it if it’s gone belly up.

Some software developers go too far with the claims they make: “With just one line of code, you can turn your inaccessible website into a site that fully complies with accessibility guidelines. 

It’s a cinch! And then you won’t need to give the accessibility of your site a second thought.” If only…. Don’t believe the hype. Overlays like that not only don’t work—they can even make it harder to use aids such as screen readers. 

But because it’s so tempting to believe the hype, these overlays are selling like hot cakes. In fact, they’ve had such a good run that more than 450 web-accessibility experts from around the world have expressed their concerns in a petition: the Overlay Fact Sheet. One of the signatories, Adrian Roselli, even keeps a log on one of the hottest-selling overlays: #accessiBe Will Get You Sued.

Our view is: just like there’s no free lunch, there’s no quick fix. Websites are accessible only if they’re well designed, well built, and well written. Unfortunately, you can’t make a site accessible with one line of code.

So what can you add to your website?

You can add functions to a website that make it easier for the user to read and use it. But beware: a prerequisite for this is of course that the website itself is already accessible. You’re just offering something extra. 

Additional functions can help certain target groups who do not have sufficient digital skills or access to tools. Let’s take two examples.

A read-aloud function

It can be nice to have the text of a long article read aloud. For visitors who have a low level of literacy or are dyslexic, that’s really nice. Visually impaired visitors who can see just enough not to need a screen reader will also enjoy having the text read out to them. One tool that’s widely used for this purpose is ReadSpeaker.

Now, there’s a big difference between a read-aloud function and a screen reader used by blind visitors. A read-aloud function is meant only for reading out pieces of text. Screen readers can do much more, such as navigate a website.

Enlarging and reducing the text

You often see it as a plus/minus icon or as the letter A in different sizes at the top of a website. I can already hear you thinking: “I can already enlarge and reduce text myself by pressing Ctrl +/-.” True—but not everyone knows that, so an icon is a useful tool for visitors who do not know all the ins and outs of the web.

Do you need to add something that a browser can already do?

Eva: “In recent years, I‘ve been dealing with a lot of people who are not digitally literate and who don’t have the money to buy tools. And there is a large group that does not understand the accessibility options that are built into a browser. My sense is that this group has been left behind.

Functions such as reading aloud, increasing and decreasing text and font size, dark mode, high-contrast mode, and reader display— they’re all available with browsers nowadays, and that’s just great. But many people do not know how to find those functions.”

Please note: Additional help options are not mandatory in order for a website to be accessible. They’re an optional extra. It is far more important that the website itself complies with the accessibility guidelines. 

Many visitors with disabilities have their own software, but the elderly and visitors who do not really feel at home on the internet could certainly use some extra help.

Conclusion: no silver bullet

If something sounds too good to be true, that’s usually because it is. There’s no silver bullet—no quick fix to make an inaccessible website accessible. Unfortunately, trying to fix inaccessible websites simply by pressing a button or adding a line of code is a non-starter.

So our advice is: make sure before all else that your website is accessible. The design, the code, and the text are examples. Once that’s all seen to, you can give users an extra hand with extra functionalities. 

Eva Westerhoff

Digitale inclusion and accessibility expert.

I help governments and companies to make every product, channel and service reachable, understandable and usable. Online and offline. For (older) customers, civilians and employees with a limitation.