When we see the lawsuits being filed in the USA, 2,352 only in 2021, and companies sentenced to pay even millions of dollars because of accessibility violations and lack of inclusive design, many start to wonder if they have similar issues.
The Americans with Disabilities Act’s guidelines (ADA guidelines) have become mandatory in 2018 and must be followed by retail and any other ventures that are accessible to the general public and that has 15 or more people in full-time employment and qualifies as a “public accommodation”. Other countries and regions also have guidelines, like the European accessibility standard EN 301 549. However, it will only be mandatory in 2025.
Accessibility violations are still very common. According to the 2022 WebAIM Million Accessibility Report, which examined millions of web pages to determine their compliance with the Web Content Accessibility Guidelines (WCAG), 96.8% of the websites analyzed are not following the WCAG 2.1, making them not accessible to people with disabilities.
In a deeper analysis, the report states that the main issues are:
- Low contrast text (83.9% of the websites)
- Missing alternative text for images (55.4%)
- Empty links (50.1%)
- Missing form input labels (46.1%)
- Empty buttons (27.2%)
- Missing document language (22.3%)
To understand what the accessibility violations are and improve the interface to achieve an inclusive design, we can categorize them by two approaches: according to the person’s affected disability, and according to the type of violation within the interface structure.
Accessibility violations according to affected disability
- Visual: when information is not available in a format that can be seen by someone who has visual impairments or low vision.
- Physical: when information isn’t available in a format that can be reached by someone who has physical impairments, like limited mobility or paralysis.
- Cognitive: when information isn’t available in a way that can be understood by someone who has cognitive impairments, like learning disabilities, dyslexia, and mental illness.
Accessibility violations according to the interface structure
- Inaccessible content: Content that is not available in a format that can be understood by an assistive technology; this may include wrong implementation of visual content such as images and videos, lack of a clear and hierarchical content structure, and not using semantic code to identify the type of content, such as button, article, navigation, etc.
- Inaccessible design: Design elements that are not operable or understandable to an individual with a disability, such as a colorblind person.
- Inaccessible interaction: Elements of a product or environment that are difficult for people with disabilities to interact with, including touchscreens.
The most common accessibility violations
As we saw in the WebAIM report, we can list at least these 6 accessibilities violations:
Low contrast ratio
There are many design principles in digital product development that can be used to increase accessibility for people with disabilities. One such principle is contrast, which describes the difference between two colors’ brightness.
The human eye can only see these two colors as different if there is a ratio of 3:1 or higher, and the use of appropriate colors, typefaces, and font sizes can help create a more accessible product for all audiences.
To make sure that all your users will be able to read your content, you need to have sufficient contrast in your design elements. This will ensure that people with color blindness or low vision can still get access to it.
- Regular text: must reach 4.5:1 contrast
- Large text: must be 3:1 contrast
- Logo, non-text or not active component text: doesn’t have a minimum contrast need.
One popular online tool to check the contrast ratio is WebAIM Contrast Tool
Missing alternative text for images
Alternative text provides a textual description of an image so that people who may have trouble viewing or reading the content can still understand it. It’s not something that you typically think about, but it is actually a crucial part of the web.
Images are often used to convey information visually, but this information is inaccessible to people who are blind or have low vision and rely on screen readers to access digital content. It helps people with disabilities, as well as people who have slow internet connections or don’t speak the language of the page, understand what the content is about.
Note that alternative text is the text that is shown when the visitor hovers over an image and it is not the same as a caption. Caption is that text that comes along with the image that may have more information about it, and also may show its copyright and source.
The use of alternative text for images has become increasingly important as the internet becomes more accessible to more and more people.
Alternative text should be descriptive and concise. It should not include any copyright information, logos, or other branding elements. The alternative text should also provide a link to an image that has more information on it if possible.
Empty links or not descriptive enough
Links that do not lead anywhere or have no content within them are considered empty links and can cause problems for screen reader users who rely on them to navigate through a website or article, leaving users without access to parts of the product. If these empty links are not fixed, then it can result in confusion and frustration when trying to read through an article.
They can be caused by broken images or videos that are not properly embedded within the site code. These images can also cause problems for screen reader users because they will not be able to access them if they’re missing from the site code.
Still about links, even if it leads to the right page, it’s important to make sure that the text is descriptive enough so that those with visual impairments will know what the link is about without having to hover over it first.
For example, if you want someone to visit your homepage and there’s a link at the top of your page labeled “Home,” then this is not descriptive enough because someone using a screen reader would not know where they’re going when they click on it unless they hover over it first.
Missing form input labels
Missing document language
How to detect and fix accessibility issues for a more inclusive design?
Start by understanding what the accessibility violations are.
The Web Content Accessibility Guidelines (WCAG) are the main guidelines to be followed to provide accessibility for a website, and, as of this date, it’s in its 2.1 version, with a draft of the 2.2 almost ready to be published. It is extensive but necessary to deliver a good and inclusive design.
There are also checklists that facilitate the work. While it is not as extensive as the WCAG (it follows the first 2 levels), it gives useful guidelines to help you define which issues to work on.
Use tools to find issues that are affecting your website accessibility.
Businesses may quickly find the majority of website accessibility problems using a number of online tools. Here are some of them:
The WAVE tool is one of the most useful and most popular tools for accessibility checks, created by WebAIM. It is a free, open-source, web-based accessibility evaluation tool that can be used by anyone to evaluate the degree to which a web page conforms with standards set by the Web Content Accessibility Guidelines 2.0 (WCAG 2.0).
-WebAIM’s Check Tool,
-Accessibility Developer Tools.
Don’t use overlay tools
Overlay tools are solutions injected on websites with the purpose of fixing accessibility violations on the fly by automatically scanning them and overriding the existing code to make the websites accessible.
Often, website owners use them as a solution for accessibility instead of manually checking the issues (a UX Audit can find them) and fixing them directly in the source.
Of the 2352 lawsuits filed in 2021, 300 of the websites were using overlay tools. That shows that they probably don’t make the website as compliant as it should be.
Some tools also claim that they use artificial intelligence (AI), however, they don’t meet the requirements for an inclusive design. In general, people with disabilities already use their own browser assistive technology, and those tools often don’t automatically enable it, even sometimes block it.
Another issue is that they cover around 30% of the guidelines, leaving a huge number of accessibility issues and keeping the website inaccessible.
AccessiBe, one of the overlay tools, was accused of participating in “harmful” business methods by the National Federation of the Blind, the most powerful civil rights and advocacy group in the USA for visually impaired people. The claim was that the tool doesn’t provide real accessible websites. Worse, they assert that, in some circumstances, their technology even violates accessibility rules.
Fix the accessibility violations directly where they happen.
The violations can happen during two stages of a website: when planning and designing the website and/or when implementing it into code.
Depending on the issues a website faces, it can either be solved directly in the code if they are content or interaction violations, or it may need a deeper fix in the design if they are visual or cognitive violations.
Of course, design fixes will need to be implemented in the code as well, making the cost higher.
That’s another reason we emphasize the importance of focusing on the user experience right from the beginning. Accessibility is also part of a good user experience, and it avoids the cost of adjustments after development.
Hire professionals to fix them
The problem with accessibility violations is that they are not easy to identify and fix. And the consequences of not fixing them can be huge. Your website might be penalized by search engines, or you might get sued for violating the Americans with Disabilities Act (ADA).
Sometimes it’s better to have experienced professionals handle such a sensitive task as fixing accessibilities violations. Depending on what they are, you may need help from a design agency or a development agency.
These agencies will assess your website for accessibility violations, provide you with a list of what needs to be fixed, and then make those fixes for you. They will also provide training on how to avoid making these mistakes in the future. Contact us and we will analyze your website
We are sorry that this post was not useful for you!
Let us improve this post!
Tell us how we can improve this post?