These Common ADA Errors Are Hurting Your Website
According to the U.S. Department of Commerce, companies without accessible sites are losing $6.9 billion a year to competitors whose sites are accessible. In addition, 71% of customers with disabilities will leave your website if it is difficult to use. These customers represent about 10% of total online spending.
ADA and WCAG Compliance is a must for online businesses, and if errors are detected on your site, it could lead to serious repercussions such as lawsuits. In 2021, there were 4,055 ADA-related cases, a 15% increase from 2020 (3,503 cases).
When accessibility tests were performed on one million of the “top” home pages by Web AIM in 2022, 50,829,406 errors were detected, with an average of 50.8 detectable errors per page.
96% of all errors detected fall into these six categories:
Addressing these types of issues would significantly improve accessibility across the web. EcomBack provides ADA WCAG Compliance services to ensure your website complies with the ADA, Web Content Accessibility Guidelines (WCAG), Section 508, and EN 301549 standards.
Keep reading to learn the ten most common ADA errors that websites need to avoid.
What are the ADA Standards for Accessible Website Design?
Website accessibility standards can be broken down into four basic principles: Perceivable, Operable, Understandable, and Robust (POUR). This refers to the information provided on the site as well as all user interface components.
Image Description:
A Venn diagram illustrating the four key principles of web accessibility based on the Web Content Accessibility Guidelines (WCAG). The diagram consists of three overlapping circles labeled Perceivable, Operable, and Understandable, with a fourth connected section labeled Robust.
Perceivable (Purple section) – Ensures that information and user interface components are presented in ways that users can perceive.
Operable (Orange section) – Ensures that user interface components and navigation are operable.
Understandable (Blue section) – Ensures that information and interface operations are clear and understandable.
Robust (Teal section) – Ensures that content can be reliably interpreted by a wide variety of user agents, including assistive technologies.
At the center of the diagram is an accessibility icon featuring a stylized human figure, representing inclusivity in web accessibility.
What are the 10 Most Common ADA Errors That My Website Should Avoid?
- Lack of Text Alternatives
Because people who are blind will be unable to comprehend the content and meaning of images, such as photos, pictures, charts, and graphs, without accompanying text, they must be described with alt text. The screen reader informs the user that the area they are looking at is an image and alternative texts provide a picture of the image’s purpose.
Alt text should be unique and concise. For instance, if there is another image nearby, the adjacent image should not have the same alternative text. Also, it’s important to avoid redundancy for screen readers by using different text for an image than what already appears in nearby text. Additionally, if there is empty alternative text, this tells screen reading technology to ignore it since there is descriptive text around the image.
Similarly, buttons must also have descriptive text. Many times, websites will use buttons for navigational purposes or as an alternative to displaying a link through hyperlinks.
- Low Color Contrast
Text in low color contrast is another frequent ADA error. This might have a detrimental impact on the site’s original design since insufficient color contrast makes reading the text difficult for persons with limited vision or color blindness who can’t read text unless there’s enough contrast between the words and background (for example, light gray text on a light-colored background).
In order to be accessible, web designers must achieve a color contrast of 4.5:1 by having a solid color background.
- No Video Captions
People with hearing disabilities may not be able to understand information communicated in a video if the video does not have captions. Video captions are text transcripts of the audio track in a video that provide essential information that can be missed by someone who is deaf or hard of hearing.
Because adding captions requires extra effort, many web designers overlook this important step in making their site accessible.
Not only do captions make videos accessible to people with disabilities, but they also benefit individuals who are not native English speakers, are trying to watch a video in a loud environment, or are simply unable to turn up the volume on their devices.
- Absence of Keyboard Navigation
A keyboard will be required for users who can’t operate a mouse or trackpad but want to access online material. By default, browsers display a visible outline, such as a blue or dotted line, around a content element that has keyboard focus. This is evident when you use the tab key on a web page.
- Third-Party Apps
Most websites rely on plugins and third-party components to provide functionality that goes beyond the native content management system’s capabilities. WordPress, Drupal, Expression Engine, Shopify, Magento, and a variety of other CMSs all rely on external third parties to develop plugins that provide specific features such as events calendars, email capture, appointment scheduling, e-commerce, and an endless number of features.
Even if a function on your site was coded by someone else, you could be held responsible if they encounter a stumbling block. For example, screen readers have been known to get stuck in the live chat box, and only a sighted person would know how to focus the screen reader away from the live chat section.
When it comes to third-party apps and legal compliance, consider whether your product relies on this integration.
Click here to read our blog: Why You Shouldn’t Use Accessibility Overlay Solutions
- Pop-Up Windows Without Verbal Notification
The goal is to provide a heads-up before opening a new window or tab automatically. It might be distracting for people who have trouble viewing visual material and for individuals with cognitive difficulties if they are not alerted in advance to the opening of new windows.
If they select to leave the current window, providing a warning will assist them in returning to it. It will help them understand that the “back” button will not work and that they have to return to the last window they had opened in order to find their previous location.
When there isn’t a warning for a pop-up, disabled users can also miss opportunities like discount offers or be unaware they have a product in their checkout cart (since there was no indication that a new window is open).
There should be A) a warning spoken in assistive technology that this link opens to a new window and B) a visual warning in the text that this link opens to a new window.
- Form Labels
Form labels have a similar function to alternate text in which they provide a visible description of the purpose of the form. Many sites, including most law firm sites, have contact forms where clients can get in touch with the firm.
These forms must be labeled accordingly to provide context to screen readers. (such as text that reads “credit card number” where that number should be entered); Clear instructions; and Error indicators (such as alerts telling the user a form field is missing or incorrect).
- Link Errors
The link text must accurately describe the link and be presented in an easily readable format. Avoid using vague phrases such as “click here,” “more,” or “go on.”
When you hover and focus these links, it’s also advised that you use CSS to provide an outline. The outline is a visual sign for visitors that helps them identify which items are being accessed if they employ the tab function to browse the site.
Finally, avoid redundant inks where adjacent links lead to the same URL address on a busy website causing additional navigation and repetition for keyboard and screen-reader users.
- Only Using Colors to Convey Information
Color-blind individuals may not receive information if it is only conveyed through color cues because they are unable to tell one hue from another. A screen reader also does not disclose the color of text on a screen, so a blind person would be unaware that red is used to indicate which fields are required on a form.
- Missing Document Language
If you don’t add a language to your site, it will be inaccessible to screen readers. The document language may be specified simply by adding an attribute to the <html> tag.
For instance: “En” identifies English as the primary language of the page. Different languages have different codes.
Why It Matters
Not only is having an accessible website the right thing to do, but it’s also the law.
People rely on websites like never before for all aspects of daily living. An increasing amount of people go online to access voting information, find up-to-date health and safety resources, and look up mass transit schedules and fare information. Thus, your site should promote usability, as 1.3 billion people in the world have a disability, and 59.6% of people with a disability in the U.S. have Internet access at home.
How Do I Test My Website for ADA and WCAG Compliance?
Website owners may do a preliminary examination using free online tools that check for “flaws” in the design and code. You can install Google Chrome Extension tools such as WAVE from Web Aim and Google Lighthouse. However, these checks do not detect all possible issues. Online businesses should engage an expert website accessibility consultant or web developer to assess their site.
EcomBack is Your Expert ADA WCAG Compliance Consultant
We highly suggest making web compliance a priority because not only does it allow your website to stand out, but you can stay ahead of the accessibility game and avoid lawsuits. Plus, all websites should make accommodations for people with disabilities.
EcomBack can design a compliant website from UX and content creation all the way to development. Our experts are well-versed in ADA compliance requirements and can help your team every step of the way to ensure they are all informed.
