Tab and read order on websites

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.
• -1 – Identifies an element that is not part of the tab order by default, but can receive focus dynamically via JavaScript.
• 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.