Common Web Accessibility Mistakes and How to Fix Them

Missing or Improper Use of ARIA Roles

ARIA roles are part of the Web Accessibility Initiative’s (WAI) Accessible Rich Internet Applications (ARIA) Suite. The use of ARIA roles helps make Web content more accessible to people with disabilities. These roles define what an element represents—for example, a navigation menu, article, or dialog box. Their use allows users to quickly understand a site’s layout and purpose. A missing or improper use of an ARIA role means an element lacks the correct role attribute, which can confuse assistive technologies such as screen readers. As a result, users might not understand the element’s purpose or how to interact with it. This can lead to user frustration and a poor user experience. 80% of Web sites have accessibility issues, making it difficult for users with disabilities to navigate.

To fix this problem: Sometimes, it’s necessary to provide more information about an element. For example, you might tell the user that a button press would open a new tab. Such information can be important because users need to know where they are when navigating a Web site. In such cases, you can use the aria-describedby property to provide additional information. But use ARIA roles only when necessary. HTML elements already have accessibility built in, and adding unnecessary ARIA labels can lead to redundancy or even break accessibility.

Businesses should avoid the overuse of ARIA because it can interfere with how screen readers interpret elements, making navigation more difficult for users with disabilities. Nevertheless, ARIA plays a vital role in Web accessibility because it can help improve the perception, understanding, navigation, and interaction with Web content for users who rely on assistive technologies. By properly implementing ARIA during Web development, you can create more accessible, user-friendly Web sites for everyone. ARIA-enabled Web sites have a 20% higher user-engagement rate in comparison to non-ARIA-enabled Web sites.

Content That Plays Automatically

Autoplaying content on Web sites can create accessibility barriers. Content that starts without the user taking any action can be distracting, especially when users have cognitive disabilities that makes it difficult for them to focus on key information. This can lead to user frustration and a poor user experience. Autoplaying content can also cause problems for people using assistive technology such as screen readers because it might interfere with the screen reader’s audio output, making it difficult for users to consume and understand the Web site’s content.

To fix this problem: It’s important to provide controls that allow users to pause, stop, or adjust autoplaying content so they feel that they have control and freedom. As a result, they’ll feel more confident while interacting with the Web site, which increases customer loyalty and leads to lower bounce rates.

Provide mute and pause options so screen readers and other assistive technologies can function properly and prevent audio conflicts to improve Web-site accessibility. The Web Content Accessibility Guidelines (WCAG) provide guidance on making Web sites more accessible. Guideline 2.2.2, “Pause, Stop, Hide,” addresses moving, blinking, or scrolling content. This guideline states that users must be able to control such content, which includes the ability to pause, stop, or hide it.

Small Buttons and Links

Buttons and links that are too small for users to recognize and tap are especially problematic for anyone with motor-skill issues who might have difficulty with precise movements, hand tremors, or limited coordination. They might become frustrated when trying to navigate such a Web site or even abandon the site. Studies show that users abandon 69.825% of online carts, often because of poor design. Also, tiny buttons and links are hard to see for anyone with low vision, who might struggle in trying to click small buttons accurately or interact effectively with important elements and content. This could lead to a higher likelihood that the user would leave the site.

To fix this problem: Businesses and UX designers can avoid this mistake by ensuring that buttons and links are large enough for users to easily click or tap. Also, avoid placing buttons and links too close together to prevent accidental clicks and errors. It’s also important to make the text easy to read by placing greater focus on text, typography, and fonts and ensuring optimal legibility by making the font size at least 16px, but 19px if the text is bold, while 24px is ideal for headings.

Missing Error Messages

Without proper error messages, users might not complete Web forms or might be unable to use a Web site correctly. For example, if a user were filling out a form and it displayed only a generic message such as “Try again” or “Error,” but didn’t explain what went wrong, or a user forgot to fill in a required field in a sign-up form, then didn’t receive an error message, the user might not realize the mistake, then assume the form was broken and leave the site. This would create a frustrating experience, leading to a potential loss of trust in the site. 70.2% of ecommerce-site visitors abandon their shopping cart, typically before completing their purchase.

To fix this problem: Users, especially those with disabilities, need clear guidance and must understand how to fix problems. Therefore, error messages must be easy to see and understand and provide suggestions for fixing a problem. Instead of displaying a vague message such as “invalid input” or “error,” show a message that describes how to fix the problem—for example, “the password must be 8 characters long.” Knowing what went wrong and how to correct it will benefit not only users with disabilities, but all users. Also, an error message should indicate the actual location of the error. For example, the text of an error message might point specifically to missing or erroneous data in the Phone number field. Don’t rely on just the use of color or an exclamation mark. Good error messages should ensure that users can quickly identify where the error is and can correct it.

Flashing or Blinking Content

The purpose of blinking or flashing content is usually to grab the user’s attention. However, continuous blinking can make it hard for users to focus on important content; irritate them by causing eye fatigue, discomfort, or even a headache; and, ultimately, cause them to leave a Web site. It can also make Web sites inaccessible to people with visual impairments. 60% of people with photosensitive epilepsy report experiencing seizures that were triggered by flashing content

To fix this problem: According to the WCAG 2.1 Guidelines, content should not flash more than three times per second to prevent causing seizures in people with photosensitive epilepsy. To reduce the risk of triggering photosensitive seizures, the flashing area should be small, and flashes should not be too bright. Also, certain colors are more likely to cause problems. For example, red flashes are especially risky because they are five times more likely to trigger seizures in people with photosensitive epilepsy. Flashing or blinking content can also distract users or make it difficult to focus on content, and thus, reduce legibility and usability.

Some tools can help check for unsafe flashing—for example, the WCAG contrast checker and Photosensitive Epilepsy Analysis Tool (PEAT)—helping to ensure that content complies with WCAG 2.1 Guidelines, remains safe for all types of users, and improves accessibility. If there is a need for flashing or blinking content to warn users, give them an option to stop the flashing. This helps prevent discomfort and ensures a more inclusive user experience.

Not Testing with Assistive Technologies

People with certain disabilities use assistive technology such as screen readers, screen magnifiers, and voice-recognition software. These tools can help people with disabilities access a Web site’s content. Conducting testing in the lab is important when testing with assistive technologies because it can help find problems that automated tests might miss such as unclear navigation or missing context. Failing to test Web sites with assistive technologies can create barriers that make it difficult for users to access content, complete forms, or use a site’s features, leading to a poor user experience and high bounce rates. It can also lead to legal issues in the many countries that have laws about Web site accessibility such as the WCAG guidelines. Not conducting such testing can result in failing to meet legal rules and cause reputational damage.

To fix this problem: Testing with assistive technologies is key for Web site accessibility because it helps find issues that real users face. Testing using screen readers such as NVDA or JAWS and voice overs lets blind and visually impaired users hear digital text and ensures that content is accessible. Also, test with screen magnifiers such as Zoom Text, which enlarges parts of the screen and helps users with low vision, and speech-recognition software such as Dragon NaturallySpeaking, which helps users with motor impairments to control devices using their voice. By testing with these tools, developers can create more accessible Web sites, making the Web usable for more people. Testing with assistive technologies is crucial because it provides vital feedback by showing how real users experience a Web site and uncovers problems that automated tests might miss.

Restricting Text Resizing or Zooming

Some users with low vision rely on features such as text resizing or zooming because they need to enlarge content to read it or zoom in to see details. In fact, according to a WebAIM survey, 48.4% of respondents use their browser’s zoom controls and 38% use their browser’s text-sizing controls. Therefore, disabling these features could create barriers that would prevent them from accessing information, lead to user frustration, and reduce usability.

Moreover, when users don’t have control or lack the freedom to zoom in on an image or resize text, they feel less valued, resulting in user dissatisfaction and disappointment. For example, a survey found that 42% of low-vision users require magnification to read content. Therefore, if a Web site restricts zooming, these users might struggle to access information, leading to frustration and a poor user experience.

To fix this problem: UX designers and businesses should provide alternative ways for people to read content by enlarging text using text-resizing options, which lets users increase the font size without breaking the layout, and customizable font-size options, which lets users adjust the text as necessary. This not only helps users with low vision, but all users, improving accessibility and the user experience. In 2024, 95.9% of Web sites had WCAG 2 failures, with 83.6% containing text that had insufficient contrast, underscoring the need for accessible text-size options.

Conclusion

However, making a Web site accessible is not just about following WCAG guidelines or other rules. Creating an inclusive, user-friendly digital space for everyone ensures that all users—including those with visual, auditory, motor, or cognitive disabilities—can navigate or interact with the Web site and its content effectively.

By addressing the top common Web-accessibility mistakes that I’ve described in this article, you can prevent potential barriers that could hinder a Web site’s users and prevent their accessing its content. Prioritizing Web accessibility can enhance a site’s user experience, expand an organization’s reach, and decrease bounce rates.

However, many Web sites still overlook the needs of people with disabilities. As a result, the reputations of these sites suffer, and they could face high bounce rates. By considering as many different disabilities as possible, you can design and build a truly equitable Web experience for all users and boost engagement.