Focus Order Semantics
Minor - WCAG LEVEL AAA
The focus order semantics issue arises when interactive elements, such as buttons, links, and form controls, do not have appropriate roles or are not semantically correct. This can lead to confusion for users navigating via keyboard or screen readers, as they may not be able to discern the purpose of each element or may find themselves navigating in a non-logical order.
For users with disabilities, especially those relying on keyboard navigation or screen readers, a logical focus order is crucial. It ensures that they can navigate through the content in a way that makes sense, mirroring the visual layout of the page. If the focus order is incorrect, users may miss important content or functionality, leading to frustration and a poor user experience.
To fix this issue:
Identify Interactive Elements: Review your HTML to find all interactive elements (buttons, links, form fields).
Ensure Semantic HTML: Use the correct HTML elements for their intended purpose. For example, use
<button>for buttons,<a>for links, and<input>for form fields. Avoid using non-semantic elements like<div>or<span>for interactive purposes without proper roles.Check Tab Order: Ensure that the tab order of elements matches the visual flow of the page. You can use the
tabindexattribute to control the order, but use it sparingly and only when necessary. Elements should naturally follow the DOM order.Use ARIA Roles: If you must use non-semantic elements, ensure you provide appropriate ARIA roles (e.g.,
role="button"for a<div>acting as a button) to inform assistive technologies of the element's purpose.Test with Keyboard Navigation: After making changes, test the focus order using the keyboard (Tab key) to ensure it flows logically and that all interactive elements are accessible.
Best Practices:
Always prefer semantic HTML over ARIA roles when possible.
Ensure that all interactive elements are clearly labeled with accessible names, using
aria-labeloraria-labelledbyif necessary.
Common Mistakes:
Avoid using
tabindexto force focus order unless absolutely necessary, as it can create a confusing experience.Do not rely solely on visual cues for interactive elements; ensure they are programmatically identifiable as such.