Should we rid the world of overlays?  

on July 7, 2022 at 8:52am |Updated on September 14, 2022 at 3:02pm A person wearing a black and white striped shirt holds a white piece of paper with a sad face drawn on it, covering their own face. The background is solid yellow. src=

What is an overlay?

In this article, I will discuss overlays, what they are and why they can be a very BAD idea!

An overlay is code that creates a graphic element that allows for some kind of interaction with a website. It will often bring in code from another website and allows websites to have extra functionality without the entire website having to be re-coded.

A good example of this might be an online chat facility or a booking calendar, such as Calendly. We use both of these ourselves.

Why can they be a problem?

The difficulty is that overlays can often be completely inaccessible for disabled people. This does not have to be an issue, provided you have always provided an alternative that can be accessed by anyone. You do not need to replace a flight of stairs with a ramp figuratively speaking, you can put a ramp next to a flight of stairs instead.

The problem occurs when there is no alternative available and an overlay is used for core functionality in a website.

Take something as simple as filling in a form. It could be a simple contact form or a complex form in several parts, with buttons to go backwards and forwards. We test forms wheb undertaking our website accessibility audits and they can be very challenging for my amazing team, just because no thought has been given to the basic functionality.

Overlays do not work with screen readers

Mede, one of my team, is blind and uses a screen reader. She will fill in a form and a message will pop up, informing her that the form has been submitted successfully. She was, however, unaware that this had happened because JAWS (her screen reader) was not able to pick this message up, she was just presented with the blank form again and assumed she had to fill it in again because it had not worked.

That is a simple example and easily fixed. However, there is another kind of overlay that is at the other end of the spectrum which, whilst being well-meaning, causes more problems than it fixes.

Overlays DO NOT fix accessibility issues! They cause them!

I am talking about overlays that “make” websites accessible for disabled people. They do not, by the way. They make the website less accessible, not more accessible. They simply do not work with screen readers. They introduce all sorts of additional conflicts and issues because they are a porous sticking plaster that does not fix poor code.

In a situation like this, you really do need to look at getting your website coded properly The guidelines are out there and freely available to the world and have been since 1999.

How about this for an idea you can do today?

However, you may not have the budget for a website rebuild right now, so how about this for an idea in the meantime? In your website accessibility statement, explain the challenges that disabled people may have with your website and take this as an opportunity to reach out to disabled people by offering them an alternative way of contacting you? This could be as simple as a priority phone number or email address but the mere fact that you are reaching out can make a world of difference to how inclusive you are seen to be.

Caption: Woman holding up a drawing of a sad face in front of her own face, as an illustration of why an overlay can be a bad idea.

Would you like to find out more?

My TEDxTalk on website accessibility has been watched over 22,000 times on the TEDx Channel! If you would like a clear, easy-to-understand explanation of what website accessibility actually is, how it affects you and what you can do about it, please follow this link:

If you would like to find out more about website accessibility, why now visit our website dedicated specifically to the subject? Please follow this link:

If you are interested in a free initial review of the accessibility of your website, why not book yourself in for a consultation? Please follow this link:

Clive Loseby

Access by Design.  Accessible Websites, Beautifully Designed.

Outstanding Website Accessibility Audits

Award-winning web design, Chichester.

Related posts