7 web accessibility mistakes business owners make according to experts 

Why is web accessibility so important?

According to the World Health Organization (WHO), approximately 20 million people who live with some form of disability may not be able to access the web without assistive technology of some kind. Laws have even been established, such as the Equality Act 2010 in the UK, that require websites and software to be designed with consideration for disabled individuals’ needs.

Not only that but, by not optimising a website for accessibility, businesses will no doubt miss out on traffic and revenue from a whole customer segment.

Jared Smith at WebAIM explains the importance of online accessibility: “Creating web content that is not accessible to many users will limit your audience, purchases, visibility, etc. It’s also the right thing to do and in many cases a legal requirement – a web site should not discriminate against a user based on their disability.”

7 common web accessibility mistakes – and how to correct them

With this in mind, TestLodge has identified the most common accessibility mistakes and provided simple ways to correct them so websites and software are easy to use by all.

1. Not making your keyboard navigation accessible  

It is important to recognise that not everyone will be using a mouse to navigate a website. Those with a motor impairment, such as difficulty using their hands or utilising fine motor skills it takes to move a mouse, may use the keyboard instead. Also, keyboard navigation is used by visually impaired users who rely on assistive technology such as screen readers, as they cannot see where to move the mouse. 

Here are some elements to look out for as part of your keyboard navigation accessibility testing:

• Links
• Buttons
• Form fields/controls (text fields, select boxes, radio buttons, etc.)
• Menu items
• Things triggered by hover, such as tooltips
• Widgets, such as a calendar date picker

However, people may navigate websites and access the elements listed above by using the keyboard in the following ways:

• Tab (focus on the next link)
• Shift+Tab (go to previous link)
• Spacebar (jump down the page)
• Enter (open link)
• The left, right, up, and down arrow keys (moving around the content)

To improve your site’s keyboard navigation, properly structure webpage HTML to be in the order in which keyboard-only users will navigate the content and make focus indicators clear on links or interactive elements.

2. Forgetting to add alt text to images

One of the most common web accessibility mistakes is failing to provide alt text on images. Jared explains: “Users with visual disabilities rely on alternative text to present the content of non-text content, such as images. Because the web is such a visual medium, it’s important to take a few moments to add descriptive alternative text to images that convey content.”

3. Using tables for layout, rather than data

By using tables strictly for data, the information is formatted clearly and simple data tables can be easily navigated. To aid assisted technology users, firstly keep the table simple. Ensure that table headings for rows and columns are easily identified as screen readers have a functionality that can query the row and column headers associated with any particular cell.

Avoid empty cells for formatting and using images of tables as these factors can hinder a visually impaired user from being able to use assisted technology.

4. Incorrectly labeled or unclear form fields 

Adapting form fields for accessibility is key for data capture or simply to provide a way for users to contact the business directly. To do this with accessibility in mind, always label and highlight the focus input elements on your required form fields and add clear instructions. For example, add ‘Phone number’ as a field label instead of a vague text, such as ‘Contact information’. You should also ensure that the form can be completed using keyboard navigation, and provide relevant error messages. 

5. Opting for low contrast text and background

It is important to keep in mind the contrast as certain contrasts and colours can make it difficult for users to identify edges and shapes, or even read the text itself. As Jared comments: “Everyone struggles reading low contrast text. This is especially impactful on users with certain types of low vision.” For example, red text against a gray background or interactive element is not easy to read. You can use a contrast testing tool which can highlight appropriate and inappropriate contrast ratios across your site.

6. Not adding subtitles and captions to videos 

Another common mistake people make with their on-site multimedia elements is not adding subtitles or captions to videos. Not everyone wishing to view your videos will be able to hear the audio or turn it on, and subtitles can also help with comprehension of the content. By adding captions and subtitles to your on-site videos, you will improve accessibility and boost user engagement.

7. Adding non-descriptive links

A non-descriptive link, such as using anchor text ‘Click here’, does not convey the purpose of the link, which is not helpful to screen reader technology. To provide users with the context of where a link is taking them, a descriptive link will improve their usability and comprehension of the site. An example of how to edit link text, ‘Learn more about accessibility here’ is more descriptive than an ambiguous ‘Learn more’ label.

Scott Sherwood, Founder of TestLodge says: “It is crucial that people with accessibility needs are considered when designing a website or browser app as user experience should be key to your strategy. Acknowledging that not everyone uses a mouse to navigate around a web page or some visitors to your site may utilise screen readers and implementing accessibility practices will keep your online presence more inclusive. Building and testing your site with accessibility in mind, you’ll be creating a great user experience for everyone, no matter how they interact with your site.”

Credit TestLodge to: https://www.testlodge.com/ and credit WebAIM to: https://webaim.org/ who provided the above post.