Movement through a web page or application should follow a logical order that matches the visual order of content on the page.
Techniques using HTML
When creating web pages be sure the order of items in the source code matches the visual order.
Understand how to use the HTML
tabindex attribute, and avoid using unless it’s needed for a specific use case. Here are the valid values of
tabindex and the function of each:
- 0 – Adds an element to the tab order. By default in most web browsers, only links, buttons, and form fields are focusable when users press the tab key. Adding
tabindex="0"allows an element that is otherwise non-focusable (e.g., a
<div>) to be focusable.
- Any positive integer – Specifies the order in which elements should be read. This should be avoided, as it overrides the default, expected tab order of the page and often has unexpected consequences.
Testing web pages
Try navigating through your web page using the keyboard alone. Using the tab key, you should be able to access all links and controls in a predictable order based on their visual position on the page. The success of this test can also be affected by whether there is sufficient visual indication of focus.