Home “Common Web Accessibility mistakes and how to fix them”

“Common Web Accessibility mistakes and how to fix them”

8 min read

Website accessibility means that websites are designed and built so all people can use them. This includes people with disabilities. Accessibility focuses on letting people with a wide range of hearing, movement, sight, and cognitive abilities use websites. It aims to ensure equal access and participation for all users, regardless of their abilities.

Websites that prioritize accessibility tend to offer better user experiences, leading to increased engagement, lower bounce rates.They also improve SEO performance by enabling more users to access information, make purchases and engage with online services.However, many websites still contain accessibility barriers like complex navigation, flashing content and small buttons that makes it difficult for some users to engage fully. But to make your website inclusive for everyone, businesses and designers must focus on the format, structure, navigation, visuals, and written content. As accessible websites see a 12% higher traffic, as inclusive design broadens the audience and improves engagement.

However in this article, we will explore some common web accessibility mistakes and how to fix them for inclusive and user friendly websites.

Common Web Accessibility mistakes

There are some barriers that make it difficult for users to complete the task and interact with content. These barriers can negatively impact the user experience, engagement and even Search engine ranking. To improve website accessibility and enhance SEO performance, you should look at the common mistakes and how to fix them;

1. Missing or improper use of ARIA roles:

An ARIA role helps make web content more accessible to people with disabilities. It defines what an element represents like navigation menus, articles, and dialog boxes. This allows users to quickly understand a site’s layout and purpose. A missing or improper ARIA role means an element lacks the correct role attribute which can confuse assistive technologies like screen readers as a result users may not understand the element’s purpose or how to interact with it which can lead to frustration and poor user experience .80% of websites have accessibility issues, making it difficult for users with disabilities to navigate.

How to fix this:

Sometimes, we need to give more information to an element. For example, we might want to tell the user that the button they will press will open a new tab. This information is important because the user needs to know where they are when navigating websites. For these types of scenarios, we can use aria-describedby to give additional information. Moreover, only use ARIA when necessary. HTML elements already have accessibility built in, and adding unnecessary ARIA labels can lead to redundancy and can break accessibility. Also, businesses should avoid overuse of ARIA as it can also interfere with how screen readers interpret elements which can make navigation more difficult for users with disabilities.

ARIA plays a vital role in web accessibility because it can help improve the perception, understanding, navigation, and interaction of web content for users who rely on assistive technologies. By properly implementing ARIA in web development, you can create more accessible and user-friendly websites for everyone. ARIA-enabled websites have a 20% higher user engagement rate compared to non-ARIA-enabled websites.

2. Avoid Auto playing content:

Autoplaying content on websites can create accessibility barriers. Content that starts without user action can distract users especially when they have cognitive disabilities that makes it difficult for them to focus on key information which can lead to frustration and poor user experience. It can also cause problems for people using assistive tech like Screen readers as the autoplaying content may interfere with the screen reader’s audio output which can make it difficult for users to navigate and understand the website’s content.

How to fix this:

It’s important to provide controls that allow users to pause, stop, or adjust auto-playing content as they feel that they have control and freedom as a result they feel more confident while interacting with the website which increases customer loyalty leading to lower bounce rates.

Additionally, provide mute and pause options so that the screen readers and other assistive technologies can function properly and prevent audio conflicts which can improve website accessibility. For example, WCAG offers guidelines to make websites more accessible. Guideline 2.2.2, “Pause, Stop, Hide,” is about moving, blinking, or scrolling content. It states that users must be able to control such content. This includes the ability to pause, stop, or hide it.

3. Small buttons or Links:

Buttons and Links that are too small to see and tap through fingers are a great problem for anyone especially people with motor skill issues as they may get difficulty with precise movements, hand tremors or limited coordination so they may get frustrated to navigate a website as a result they may abandon the site. Studies show 69.825 of online carts are abandoned, often because of poor design. Also, tiny buttons and links are also hard to see for anyone with low vision so they may struggle to click on small buttons accurately and effectively interact with important elements and content on a website leading to higher likelihood of leaving the site.

How to fix this:

To avoid this mistake, businesses and designers need to ensure that buttons and links are large enough to be easily clicked or tapped and also avoid placing buttons and links too close together to prevent accidental clicks and errors. It’s also important to make the text easily readable, you need to focus more on text, typography, fonts, and keep the size at least 16px for optimal readability but if the text is bold then 19px is recommended while 24px is ideal for headings.

4. Missing Error messages:

Without proper error messages, users might not complete forms and they may not use the website correctly. For example, a user is filling a form but it only shows a generic “Try again” or “Error” but doesn’t explain what went wrong or if a user forgets to fill in a required field on a sign-up form but doesn’t receive an error message, they might not realize their mistake so they could assume the form is broken so they may leave the site. This creates a frustrating experience leading to potentially losing trust in it. 70.2% of e‑commerce visitors abandon their shopping carts, typically before purchase completion

How to fix this:

As users, especially those with disabilities, need clear guidance so they must understand how to fix the problems as a result, error messages should be easy to find, understand and they must provide suggestions for fixing it. For example, instead of “invalid input” or “error”, the password must be 8 characters long so this will not only benefit the ones with disabilities but it will benefit everyone from knowing what went wrong and how to correct it. Also, they should explain the error’s location like the error message specifically points to the missing “Phone number” field and it should be pointing out with the text, don’t rely on colours or just an explanation mark. This ensures that users can quickly identify where the error is and correct it.

5. Flashing/ Blinking content:

Blinking and flashing content is usually used for grabbing users attention but designers don’t know that continuous blinking can irritate users and makes it hard for them to focus on important content and they leave the website as it can cause eye fatigue, discomfort or even a headache. It also makes websites inaccessible to people with visual impairments. As 60% of people with photosensitive epilepsy report experiencing seizures triggered by flashing content

How to fix this:

As per WCAG 2.1 Guideline , content should not flash more than three times per second as this can cause seizures in people with photosensitive epilepsy. The flash area should be small and flashes should not be too bright to reduce the risk of triggering photosensitive seizures. Also, certain colors are more likely to cause problems like red flashes are especially risky as it is 5 times more likely to trigger seizures in people with photosensitive epilepsy and it can also distract the users readability leading to reduce in usability as it is difficult to focus on content with flashing or blinking content.

There are also some tools that can help check for unsafe flashing like WCAG contrast checker and Photosensitive Epilepsy Analysis Tool (PEAT) as these tools help ensure content complies with WCAG 2.1 Guidelines, remains safe for all types of users and improves accessibility. And if there is a need of flashing or blinking content so warn the users and provide them an option to stop the flashing as this helps prevent discomfort and ensures a more inclusive user experience.

6. Not testing with Assistive technologies:

People with disabilities use assistive technology like screen readers, screen magnifiers and voice recognition software. These tools help people with disabilities to access the web content. So manual testing is important with assistive technology as it helps to find problems that automated tests miss like unclear navigation or missing context. Without assistive technology testing, websites create barriers which makes it difficult for users to access content, complete forms, or use features. This leads to a poor user experience and high bounce rates. It can also lead to legal issues as many countries have laws about website accessibility like WCAG guidelines so not testing can mean not meeting legal rules which can result in reputational damage.

How to fix this:

Testing with assistive technologies is key for website accessibility as it helps find issues real users face. Use screen readers (NVDA, JAWS and voice over) as it lets blind or visually impaired users hear digital text as testing with them ensures that content is accessible. Also, use screen magnifiers like Zoom Text as it enlarges parts of the screen which helps users with low vision and Speech recognition software like Dragon NaturallySpeaking, helps users control devices with their voice which helps people with motor impairments. So by using these tools, developers can create more accessible websites and this makes the web usable for more people. Additionally, manual testing with assistive technology is crucial as it gives vital feedback and shows how real users experience the website which uncovers problems that automated tests may miss.

7. Restricting text resizing and zooming:

Users with low vision rely on these features as they need to enlarge content to read it and some users need to zoom in to see details so disabling these features creates barriers which prevents them from accessing information which will lead to user frustration and reduce in usability. Moreover, when users don’t have their control or when they don’t have any freedom like to zoom in on the image or resize the text so they feel less valued resulting in dissatisfaction and disappointment. For example, a survey found that 42% of low-vision 42% users need magnification or more to read content. If a website restricts zooming, these users may struggle to access information which can lead to frustration and poor user experience.

How to fix this:

Designers and businesses should provide alternative ways to people who need larger text to read content like text resizing options which allows users to increase font size without breaking the layout and customisable font size options which allows users to adjust the text as they need. This will not only help users with low eye vision but help everyone also, it will improve accessibility and user experience. As in 2024, 95.9% of websites had WCAG 2 failures, with 83.6% containing text with insufficient contrast which underscores the need for accessible text options.

However, making your website accessible is not just about following rules or following WCAG guidelines but it’s about creating an inclusive, user-friendly digital space for everyone so that all users including those with visual, auditory, motor or cognitive disabilities can navigate or interact with your website and content effectively.

By addressing these top common mistakes, you can address potential barriers that may hinder individuals from accessing your content. Prioritizing web accessibility can enhance user experience, expand your reach, and decrease the bounce rates. However, still there are many websites that overlook the people with disabilities as a result they face high bounce rates and poor reputation. In fact, 48.4% of respondents use browser zoom controls, and 38% use browser text sizing controls. So by considering as many different disabilities as possible, you can build a truly equitable web experience for all and can also boost engagement.