Goal
Ensure that the focus order of elements on the page follows the reading order, and makes logical intuitive sense.
Why this matters
Users expect the focus order to match the reading order. This makes it easier to find the focus as it shifts from item to item. When the focus order is illogical, unintuitive, and doesn’t follow the reading order, users can quickly lose sight of the focus indicator. If they don’t know where the focus is, the page becomes unusable.
How to implement
UX Designer
Read Focus Order.
Developer
Work with the UX Designer to determine what the focus order is, to ensure you’re in agreement.
Ensure that you use native HTML components (links and buttons) so that you don’t need to add or change the focusability of the components.
Ensure that the DOM order follows the reading and focus order so that you don’t need to reorder the focus.
Follow the recommendations in Placing the interactive elements in an order that follows sequences and relationships within the content by the W3C.
How to test
- Using the keyboard’s tab key, move the focus through the page’s focusable elements until you reach your starting point.
- Ensure that the focus order matches the order specified by the UX Designer.
- Shift-tab to move the focus backward through the page’s focusable elements until you reach your starting point.
- Ensure that you can reach your starting point in either direction.
If any element is not in the same order as the UX Designer has specified, raise an issue.