TPGi’s accessibility experts have identified the top 10 accessibility errors found in 2023 through manual and automated testing. Here are the results:
1. No link text
The <a> element is used to specify links to other web pages or locations within the same webpage. However, developers sometimes use the <a> element to provide other interactive functionality without including any link text. This makes it difficult for assistive technologies such as screen readers to communicate the purpose of the link.
Incorrect:
<a href="https://example.com"></a>Correct:
<a href="https://example.com">Visit example.com</a>Learn more about writing meaningful link text.
2. Non-active element in tab order
This error occurs when a non-interactive element has been placed in the tab order using tabindex="0". This makes it focusable using the keyboard when it doesn’t need to be, reducing efficiency and increasing effort for keyboard users.
Incorrect:
<p tabindex="0">This paragraph should not be focusable.</p>Correct:
<p>This paragraph should not be focusable.</p>Learn more about keyboard interaction.
3. Missing link alt attribute
Closely related to item #1, often links are labeled with an icon or other graphic that visually indicates the purpose of the link. A common error is to provide this graphic without any text alternative. When an image link has no alternative text, assistive technology users will be unaware of the link’s purpose.
Incorrect:
<a href="https://example.com"><img src="image.jpg"></a>Correct:
<a href="https://example.com"><img src="image.jpg" alt="Visit example.com"></a>Learn more about all things ‘alt’.
4. No alt text
Related to item #3, an image’s alternative text provides a text description of the image content. When an <img> element lacks a text alternative, screen reader users have no way of knowing what the image is for.
Incorrect:
<img src="image.jpg">Correct:
<img src="image.jpg" alt="Description of the image">Learn about the five golden rules of compliant alt text.
5. List not nested correctly
Using markup to identify lists helps communicate the structure of page content in an accessible way. When a list item has a nested list, it’s important to use markup in the correct way to make the nesting relationships clear.
Incorrect:
<ul>
<li>Fruits</li>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<li>Vegetables</li>
</ul>Correct:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables</li>
</ul>Learn more about HTML lists as a way to structure content.
6. Duplicate labels used
Another accessibility issue commonly detected by automated tools is form fields that have multiple identical labels. Having more than one label with exactly the same text can make it harder for some users to understand the form’s structure.
Incorrect:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="name">Name:</label>
<input type="text" id="name2" name="name2">
</form>Correct:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="name2">Full Name:</label>
<input type="text" id="name2" name="name2">
</form>Learn more about accessibility and labeling.
7. Positive tabindex value
The tabindex attribute is a way to control which elements on a web page receive keyboard focus. However, using positive tabindex values can make it difficult to maintain and optimize keyboard usability.
Incorrect:
<input type="text" tabindex="1">Correct:
<input type="text" tabindex="0">Learn more about using the tabindex attribute.
8. Invalid aria-describedby
Sometimes, a control may need a description as well as a label, when users might need to know more details about the state or purpose of the control. The aria-describedby attribute can be used to provide a connection between a control and some descriptive text elsewhere on the page.
Incorrect:
<div aria-describedby="description">Content</div>
<div id="description">Description</div>Correct:
<div aria-describedby="description">Content</div>
<div id="description" role="description">Description</div>Learn more about using ARIA attributes for labels and descriptions.
9. No label for button element
Similar to links without link text (item #1), a button without an accessible label does not convey its purpose to assistive technology users.
Incorrect:
<button><svg viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.41l-1.41-1.41a.5.5 0 0 1 .7-.7l2.39 2.39a.5.5 0 0 1 0 .7l-2.39 2.39a.5.5 0 1 1-.7-.7L12 10.41l-1.41-1.41z"></path></svg></button>Correct:
<button><svg viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8Learn more about label use in WCAG.
10. Invalid aria-labelledby
Very similar to item #8 on this list, in specific situations a control may be provided with an accessible label by connecting the control to some text elsewhere on a page. The aria-labelledby attribute can provide this connection, but it needs to correctly reference the text element’s ID.
Share this blog on:
