Most Common Web Accessibility issues
-
Low Contrast Text
Overview
Low contrast text is when the colour of the text is too similar to the background, making it harder to read.
Low contrast text is the most common Web Accessibility Error. It is found on around 83.9% of home pages and each home page has approximately 34 distinct instances of low contrast text.
Who does this affect and why?:
People with low vision. This is because they struggle to distinguish between letters and the background without a sufficient amount of colour contrast. Around 2% of Australians suffer from severe vision impairment
People who are colour blind. Many websites and apps rely on hue differences instead of brightness, making it difficult or even impossible for some colour blind people to read text. Around 2% of Australians have some kind of colour blindness.
People who have cognitive impairment or a neurodevelopmental disorder. Difficulty focusing or maintaining attention is exacerbated by poor visual contrast. Around 10% of Australian children have an early neurodevelopmental condition and roughly 1.6% of people in Australia have dementia.
Examples:
Error: Low Contrast Text
This text is very hard to read.<span style="color: #d3d3d3; background-color: #ffffff;"> This text is very hard to read. </span>Solution: High Contrast Text
This text is easy to read.<span style="color: #000000; background-color: #ffffff;"> This text is easy to read. </span>Tools:
Use WebAIM's Contrast Checker to compare the colour of the background to the colour of the text. You should aim for a contrast ratio of at least 4.5 for normal text and 3 for large text.
To check the colour contrast of an entire page, use WebAIM's WAVE, Google Lighthouse or just press Ctrl+Shift+C and hover over the elements you want to check. These tools can be found under the Links heading.
-
Missing Alt Text
Overview
Missing Alt Text is when a website’s visual elements(like images, charts, videos and interactive elements like buttons) don’t have an alternative text. The alternative text provides a short, written text description of images and graphics. Check this link to learn more about Alt Text: Harvard Alt Text Guide
Missing Alt Text(Alternative Text) is found on roughly 53.1% of the homepages on the top 1 million websites and around 16.2% of all images had missing alt text with 10.8 errors on average for every page.
Who does this affect and why?:
People with vision impairment. This is because they may require screen readers to read the website elements in order to understand the content, and missing alt text means that they won’t be able to understand any images, graphs or interactive elements in the website. Around 2% of Australians suffer from severe vision impairment.
Examples:
Error: Missing Alt Text
<img src="image.jpg" />Solution: Descriptive Alt Text
<img src="image.jpg" alt="A grey placeholder image showing the dimensions 100x100" /> -
Missing Labels
Overview
Missing Labels is when form fields, check boxes, radio buttons or other interactive elements don’t have a HTML tag to describe their functionality, making it difficult/impossible to use for people with screen readers. Check this link to learn more about Missing Labels: Bureau of Internet Accessibility Missing Input Label
Around 51% of the home pages of the top 1 million websites have missing labels. Home pages had around 6.9 form inputs on average, with around a third of those(33.1%) not being properly labelled.
Who does this affect and why?:
Much like missing alt text, missing labels primarily affects people with vision impairment because they require screen readers to understand the content of a website, and missing labels means they won’t understand the functionality of interactive elements like form fields or check boxes on a website. Around 2% of Australians suffer from severe vision impairment.
Examples:
Error: Missing Label
While it looks perfectly fine for most people, screen readers won't understand the functionality of this form input.
Email Address:
<p>Email Address:</p><input type="text" name="email">Solution: Linked Label
Screen readers will understand the functionality of this form input because it says it in the label element.
<label for="user-email">Email Address:</label> <input type="text" id="user-email" name="email"> -
Empty Links
Overview
Empty Links is when hyperlinks in a website don’t have any associated content or has very undescriptive content(like “click here”). Check this link to learn more about Empty Links: Bureau of Internet Accessibility Empty Links
Around 46.3% of the homepages on the top 1 million websites have empty links.
Who does this affect and why?:
People with vision impairment. This is because they usually use keyboard shortcuts like tab to go from link to link, and if the link doesn’t have enough information to be understood on its own, they won’t understand where it would link to. Around 2% of Australians suffer from severe vision impairment.
Examples:
Error: Empty Link
People who use keyboard only navigation won't understand the context of this link, the screen reader will just say "click here".
Read our Accessibility Guide: Click here
<p>Read our Accessibility Guide: <a href="https://example.com">Click here</a></p>Solution: Link with Descriptive Text
People who use keyboard only navigation will understand this link, the screen reader will say "Read our Accessibility Guide".
<a href="https://example.com">Read our Accessibility Guide</a> -
Missing Language
Overview
Missing Language in HTML is when a page or post is missing a language declaration that is used by assistive technology to understand what the default language for that particular page is. Without a language declaration, a screen reader may have a difficult time understanding what language the page is and may miss sections of text or convey them incorrectly. Note that you should declare any language changes if there are any mid-page. Check this link to learn more about Missing Language: Equalized Digital Missing Language
Around 13.5% of the homepages on the top 1 million websites have missing language.
Who does this affect and why?:
People with vision impairment. This is because they rely on screen readers and keyboard shortcuts to navigate websites, and missing language may result in them not understanding the default language of the page and missing sections of text. Around 2% of Australians suffer from severe vision impairment.
Examples:
Error: Missing Document Language
(Language declaration applies to the whole page, see code below)<!DOCTYPE html> <html> <head>...</head> <body>...</body> </html>Solution: Defined Document Language
(Screen readers now know how to pronounce the text)<!DOCTYPE html> <html lang="en"> <head>...</head> <body>...</body> </html>