How to Fix the 5 Most Common Web Accessibility Mistakes

Solutions to the 5 Most Common Web Accessibility Mistakes

To help your website become more compliant with accessibility guidelines (and less likely to receive a lawsuit), we’ve compiled a list of the top five most common web accessibility mistakes and how you can fix them:

1. Low Colour Contrast

According to WebAIM, 83.6% of home pages in 2023 had text that was low colour contrast. Colour contrast is the difference between two colours and how much they stand out from one another. It was the most commonly detected accessibility issue, making it difficult for visually impaired users or those with colour blindness to view or distinguish content on the website (e.g., identifying edges/shapes).

Poor colour contrast is one of the easiest accessibility mistakes to fix: colour contrast checkers like WebAIM and a11y.com allow you to input two hexadecimal or RGB (red, green, blue) colour values into a website which calculates the contrast ratio for you. If the resulting ratio is too low, you can simply change one of your colour values to something else.

2. Inaccessible Forms

Online forms are frequently missing error messages or have poorly labelled form fields. This can confuse and frustrate users with sight loss or cognitive disabilities who are trying to navigate and fill out forms. Some online forms also have time limits that will force the user to exit the page once a certain number of minutes have passed. This makes for poor web accessibility, especially for individuals with physical disabilities who may need extra time to complete a form.

Implementing clear form labels, correctly coding these so they are associated with a form field, displaying text error messages, and giving users the choice to extend or remove time limits would go a long way to making forms more digitally accessible.

3. Missing or Inaccurate Image Alt Text

WebAIM’s 2023 study found that over 58% of web pages have missing or inaccurate image alternative (alt) text. Putting alt text descriptions on images is the only way visually impaired users can interpret the purpose of the visual content.

When uploading images to your website or digital document, look out for an input field labelled ‘alt text’ – many content management systems and document editors have one built in. Fill in this input field with a brief, one sentence description of the image you are uploading, and you will have made your image more accessible to all.

4. Unclear or Vague Link Text

Links help users navigate the internet by directing them to specific pages and websites. It is essential to have clearly labelled links so users instantly understand where they are going. Links named ‘read more’ or ‘click here’ do not provide enough context or information, and the same goes when using buttons and images as links. People are less likely to follow a link if link text is vague and unclear. Naming links something as simple as the title of the webpage it is leading to is enough to comply with accessibility standards.

5. Inaccurate Heading Structure

If headings on a webpage are absent or out of order, your website will look unorganised and confusing. It is a common web accessibility issue for websites to use large, bold text for headings rather than a proper heading structure using HTML heading elements (e.g., h1, h2, h3). Website owners should make sure to not only use headings in their content, but to differentiate headings from normal text both through visual design and correct HTML usage.