Accessibility overlays don't work!
What is an accessibility overlay?
This is one of the most confusing aspects of website accessibility. It is also one of the most important, as this can have a detrimental effect on the accessibility of your website. It can also be extremely beneficial, which is where the confusion sets in!
Let us begin by defining what an accessibility overlay is. To do that, we first need to understand what an overlay is.
What is an overlay?
An overlay is an element on a webpage that allows for additional content to be displayed without affecting the existing design. For example, on the bottom right-hand corner of many websites, you will see a Chat Widget, which usually consists of a speech bubble next to the words “Chat with us”.
If you open that, you will see a form appear asking you for a few basic details like your name, email address and what your enquiry is about. Once that has been filled in and you hit the “Start Chatting” button, you will be able to chat with the business in real-time.
This Live Chat will carry on for as long as necessary, without affecting the page behind it. This is an overlay. If it is closed off, you can see the rest of the web page behind it.
Are there other overlays?
Another example of an overlay commonly used is a shopping basket with eCommerce websites. Selecting the shopping basket icon will open it up but it may only cover part of the screen, like the chat widget did. This is also using an overlay.
A contact form may also appear as an overlay, rather than on a separate page. Hopefully, you get the idea by now.
We understand why these kinds of overlays are popular, as they allow you to reduce the amount of visual clutter on the screen, allowing everyone to have a better user experience.
Unfortunately, they are often coded in a way that makes them impossible to use by disabled people. This is why many people who work in accessibility do not like overlays: they assume that they are all inaccessible because that is so often the case!
However, not always.
An accessible overlay?
For example, on our website, the chatbot is fully accessible. It was created by Olark and they pride themselves on the fact that their chat solution is accessible, unlike every other one we have encountered in our testing, so far.
It is possible to code any overlay so that it is accessible, it just takes some time.
Web accessibility overlays
So, now we have explained what an overlay is, what about web accessibility overlays? What are they and where do they fit in?
Web accessibility overlays, in general, allow you to make changes to the website by choosing options on some kind of toolbar, usually at the top of the screen. You can choose functions like increasing the size of the text, changing the foreground and background colours, or remove the styling altogether. Simple changes that make the website easier to use.
Have they been around for a long time?
The idea of being able to do these kinds of things has been included within WCAG standards since they were first released in 1999. Currently, they fall under 1.4.8: Visual Presentation (Level AAA) . However, the AAA standard is beyond the AA standard that everyone aspires to comply with, so it is not seen as an essential option. For the record, this is something that we have always offered, ever since our first website was launched in 2006. It is not difficult to do, it is a simple combination of CSS and JavaScript.
So far so good. An accessibility toolbar will allow your visitors to have a greater level of control over how the content is displayed.
A crucial difference
However, we now come to a crucial distinction between an accessibility toolbar that is part of the website’s code and a toolbar provided by an external company that sits on top of the website and has to be enabled by clicking on a button.
This is where things start to go wrong very quickly. Although both toolbars (internal and external to the website’s native code) appear to do the same thing, the external toolbar actually makes the website less accessible for many disabled people, especially those using screen readers.
Unfortunately, these external toolbars are marketed as solutions that will make your website compliant with WCAG Accessibility Standards. If you are responsible for ensuring that your website is accessible, the idea of a solution that will make all your problems go away just by dropping a line of code into your existing website is incredibly appealing. However, let me repeat, they will do no such thing. For more information on this, please visit https://overlayfactsheet.com/.
Native vs External
On our website, you will see our accessibility toolbar. It is called Accessible View and sits alongside the navigation menu at the top of the page. If you open it up, you will see a range of different options that allow you to change the size of the text, change the foreground and background colours and remove the styling altogether. This is an example of an accessible toolbar and we have tested it with our team.
This Toolbar is our own code, it is not a 3rd party product. It is by no means perfect and it is always being redeveloped but the principles behind it are always the same: to offer visitors a greater control over how the website is displayed to them. You do not need to do this, as I said, to be compliant with WCAG 2.2 AA, as this falls under AAA but it has always been important to us to offer it.
Put it back to the visitor
The other approach, of course, is to expect every visitor to your website to know how to change text size themselves, using controls within their browser. For example, holding the shift key and repeatedly pressing the + or – keys will enlarge/reduce the text, so there is no need to have buttons on a website that offer these options.
There are two drawbacks to this. Firstly many people do not know that they can do this. Secondly, it requires visitors to be able to press two keys at the same time. Some people lack the motor skills to be able to do this. Iona, one of my team, has a hand disability and is not able to do this.
With colour contrast, although you can get plugins for your browser to give you different contrast options, they also cause problems. Sara, another member of my team, is neurodivergent. She has the dark mode plugin on her browser because white backgrounds give her headaches, however she has shown it makes some parts of a web page unreadable.
Inclusive design works on the principle that you should be able to design a website that meets the needs of every visitor just as it is. The difficulty with that is that neurodivergent and visually impaired people are affected in different ways, so it is impossible to have a single colour contrast that meets everyone’s needs. By offering your visitors a range of options, you have a greater chance of allowing them to choose a display that makes them feel more comfortable.
In conclusion
Overlays can accessible
Accessibility overlays can be accessible
However external accessibility overlays are not accessible
So I need to change the title of this article!
Clive Loseby
Global Leader in Website Accessibility, Ted Speaker