top of page

The Ins and Outs of Website Accessibility Overlays

Celeste Hayes

By Celeste Hayes June 12, 2023




Image Description: A picture of the website accessibility symbol. An image of an icon of a person in the middle of a circle.


Do you recognize the icon above? If you examine the website of your favorite popular retailer or chain restaurant, you might notice it on any corner of the screen. What is it exactly? What does it mean?

We had the same question and wanted to share our findings on what it symbolizes, where it originated as well as how, and why it is used. The specifics have some technical jargon relative to web development, but we aim to keep this explanation simple.

It's both an interactive widget and a symbol. In some digital spaces, it isn't just an image but a digital add-on or a website accessibility overlay.


What are Website Accessibility Overlays?


Website accessibility overlays are buttons that can be installed on a site that use a line of code to instantly implement accessible functions that benefit users with disabilities. If you click on the icon, there’s a menu of functions that allow you to adjust light and dark color contrast on the webpage, enlarge page text, magnify the screen, and highlight the hyperlinks on the site in addition to other features. This technology is meant to replace a team of people who audit and review a website for accessibility testing.


What is Web Accessibility? Why is it important?


According to the Web Accessibility Initiative, the definition of web accessibility is technologies, tools, and websites that are designed so that people with disabilities can navigate, understand, interact with, perceive, and contribute to the world wide web. Although these tools, and technologies are designed to create inclusive experiences for people with visual, speech, auditory, physical, cognitive, and neurological disabilities, many others benefit from their implementation. For example, older individuals, and those with temporary disabilities, such as a broken limb can benefit from using these features.


The Website Accessibility Overlay Symbol


The original image used to represent the website accessibility overlay button was extracted from Apple Inc.’s Universal Access Symbol. A grouping of accessibility functions that have the same uses as overlays, allowing users to change color contrast, magnify the screen, and more on their devices. While the details of the designs of the symbol design are not officially confirmed by the company, observers agree that the design mirrors the Italian artist and Scientist, Leonardo Di Vinici’s Vitruvian Man. The adaptation of this image on website accessibility overlay buttons arrives at a convenient time as the discussion has grown around the need for a new international symbol of access. The original symbol of an individual in a wheelchair was designed by Susanne Koefoed in 1968 and has been the standard International Symbol of Access for decades. In 2016, the Access Icon Project served as an initiative to change the standard International Symbol of Access, participants reimagined the wheelchair symbol into a more representative icon to show an all-encompassing image of people with disabilities. Today Susanne Koefoed's design is still the most recognized globally.

Major companies have extracted and used variations of Apple’s Universal Access Symbol, to symbolize their website accessibility overlay plugins, addons, and widgets indicating an accessible website. But why are these overlays suddenly popping up?


The Rise and Use of Website Accessibility Overlays


In the last few years, there’s been an uptick of web accessibility lawsuits brought to federal court citing Title III of the Americans with Disabilities Act. In 2022 plaintiffs filed what Level Access refers to as a 12 percent increase in lawsuits from 2021. Digital technology has become necessary and prolific in everyday life, and the need for usable online experiences particularly for people with disabilities is paramount. Companies have been using these web accessibility overlays on their websites to quell the demand for usable, ADA-compliant online space and to avoid a potential loss in a legal battle and hurt reputation.

Website Accessibility Overlays or Accessibility Testing? Which One to Choose and Why?

When websites and web tools are properly coded, people with disabilities can use them. However many sites and tools have accessibility barriers that make it difficult or impossible for people with disabilities to use. Web accessibility overlays may be convenient for the administrator when needing to implement accessibility quickly for end users, but at what cost?

Integrity Insights Counseling administers thorough accessibility testing utilizing WCAG or Web Content Accessibility Guidelines to create an ADA-compliant and accessible digital space that benefits all end users. We will always suggest using a team of accessibility testers over web accessibility overlays because of the following:

  • Redundancy. Often end users with disabilities already have accessible technology through built-in computers or software that they use for web access and daily functions. This would make a user widget a redundant functionality.

  • Disabilities are diverse. One user's experience navigating a site does not account for all end users' experiences. Accessibility testing involves users who have varied disabilities and can provide accurate and in-depth evaluations and suggestions.

  • Change is continuous. Technology is agile and always updating, adapting, and learning. Accessibility testing allows for upkeep with these changes so that end users are never left out of an accessible website experience.

While some automated repair helps end users engage with your website, overall using website accessibility overlays isn't a long-term solution. Generally, overlays don’t repair content in Flash, PDF, Java, HTML, or media files and full ADA compliance can’t be achieved with implementing these overlays.

Integrity Insights Consulting can assist you with all of your accessibility testing needs, please reach out to us from our Contact Us Page or emailing chayes@iinsightsconsulting.com




Sources

  1. WCAG WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C

  2. Designed to Inspire: Searching for an Accessible Symbol

  3. Reimagining Accessibility and the Wheelchair Symbol Huffington Post

  4. "The Accessible Icon Project." https://accessibleicon.org/. Accessed 12 Jun. 2023.

  5. Web Accessibility Lawsuits: 2022 Recap and What to Expect in 2023 | Level Access

  6. Image "File:Accessibility.svg - Wikimedia Commons." 16 Dec. 2020, https://commons.wikimedia.org/wiki/File:Accessibility.svg. Accessed 12 Jun. 2023.

  7. Brooke Dumas, Human Resources and Business Operations Coordinator of Deque Systems

21 views0 comments

Comments


bottom of page