The Truth about Overlays
Overlays are one of the most misunderstood aspects of web design. Many web designers love them and, in accessibility circles, they are generally seen as an evil that must be avoided at all costs.
As an accessible web design company that believes passionately in inclusivity and beautiful design, we feel it is important to publicly state where we stand on their use.
What is an Overlay?
An overlay is simple in concept. It is a graphical element that appears as an additional layer on a web page that allows for additional information or elements to be displayed without affecting the design of a page.
The following are examples of overlays:
- A chat widget, usually at the bottom of the screen
- A lightbox, which allows you to view an image in a larger large
- Notification messages which appear a pop-up
- A menu that stays in place on the screen as you navigate up and down a page
Why are they used?
They are usually used to keep a web page as uncluttered as possible. If a web page is cluttered, it can be difficult for people to navigate through and, frankly, everyone likes a nice clean design. On the face of it, they are an effective way of allowing extra functionality without disrupting the layout of a web page.
Should you use them?
This is where the confusion begins. Broadly speaking, there are two types of overlays:
- Overlays provided by a 3rd party
- Overlays designed within the website’s native code
An overlay provided by a 3rd party could include a chat widget, provided by a CRM. These may or may not be accessible for disabled people. However, the kind of overlay that is meant when discussing website accessibility is usually one that provides some kind of accessibility solution or enhancement.
There are several companies that provide accessibility “solutions” that claim to fix an inaccessible website just by inserting one line of code. It sounds to good to be true. Is it?
Unfortunately, adding an overlay of this nature to a website that is not accessible just compounds the problems on so many levels. For further information, please read this article on overlays https://overlayfactsheet.com/en/ .
So what about overlays designed within the website code? Well, that can be an entirely different matter, it depends on how it is coded.
Can you have an Accessible Overlay?
Yes of course you can! If you want an example, look at our Accessibility Toolbar at the top of this page! It gives our visitors the ability to change the foreground and background colours, change the text size or remove the styling altogether. This can be very helpful for many people, such as those who are visually impaired or are neurodivergent.
We have always offered accessibility options of this nature since our first website, which was built in 2006, although the options were far less sophisticated back then! It has always been vital to our mission that we offer our visitors the ability to change the way the page is displayed, easily and without requiring any plugins, because we do not believe that the onus should be on the visitor to know how to change the way a web page looks.
What about Inclusive Design?
We love the concept of Inclusive Design! To quote from an excellent article on the subject, “Inclusive design describes methodologies to create products that understand and enable people of all backgrounds and abilities.” In other words, it can be seen as creating a website that meets the needs of all visitors, right out of the box. In other words, a fully accessible one! This is of course something that is very close to our hearts!
However, it is not impossible to meet the needs of every visitor with one design. Neurodivergent people are affected by colour contrast in differing ways. What may work for one neurodivergent person may not work well for another, so offering the facility to choose from a selection of differing contrasts, both with and without images and formatting, is going to be necessary.
How do Overlays fit in with WCAG Guidelines?
One element of WCAG Success Criterion 1.4.8 Visual Presentation (Level AAA) specifies that a mechanism should be provided to allow the user to change the foreground and background navigation. We have always aspired to AAA level of accessibility, rather than AA and, although we would never claim to be perfect, in this at least we believe offering colour contrast \nd text size options to users is just something that should be done with every website.
Another element from the same guideline specifies that text on a page can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window. It is certainly true that many websites have been able to do this for many years, however, zooming in and out using a Browser invariably means pressing more than one key on the keyboard at the same time, such as pressing the + or – key whilst also holding the Ctrl key.
The difficulty with this is that many disabled people lack the fine motor skills required to press both the Ctrl and the Plus or Minus key together. If you have a hand disability and use voice control, you will not be able to do this at all.
By offering a choice of text sizes on the screen, as well as being able to zoom in and out, you meet the needs of more people, which is why we have always offered it. The later versions of our toolbar have larger icons that are easier to select and meet WCAG 2.5.8 Target Size – Minimum (Level AA), which was introduced in WCAG 2.2. However, this takes up more screen space, which is why we have chosen to keep it within a fully accessible overlay.
We have developed our accessibility toolbar with members from our team of disabled testers, who use screen readers and dictation software, to make sure that it is as accessible as possible.
We hope that it inspires others to copy these techniques to help make their own websites more accessible.
Changing the World, One Website at a Time.