What is web accessibility and why is it important?
You may already understand accessibility in terms of the physical environment, but accessibility in digital spaces is proving to be just as essential. Web accessibility is the design practice of making websites, mobile applications, and digital documents usable for as many people as possible, including those with disabilities.
With the rise in popularity of remote working, learning, and e-commerce, disability acts have begun enforcing the need for accessibility compliance. The Web Content Accessibility Guidelines (WCAG), upheld as the worldwide standard for digital accessibility, are named in legislations around the world. If public-facing organisations want to operate in places like the USA or European Union, they must meet the WCAG or face legal repercussions.
Digital inclusion is also a growing issue in the minds of users. With 16%, or one in seven, people worldwide experiencing some form of disability, that is a huge demographic who may miss out on information or online services because a website or mobile application is not accessible. The developers, designers, and content creators of today must learn how to identify areas on their website with poor accessibility and implement fixes.
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.