Tab and Read Order

Movement through a web page or application should follow a logical order. It should mirror the visual order of navigation and controls on the page. Users who are navigating by keyboard (e.g., using the tab key) expect to move sequentially from left to right and top to bottom through the focusable elements on the page.

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. 

In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, use the :focus selector in CSS to define a style change that happens when an element has focus. For example, the following CSS code styles links as black text on a white background by default; then reverses the foreground and background colors when the element has keyboard focus (using :focus) or when the user is hovering over it with a mouse (using :hover):

a {
 color: black;
 background-color: white;
 text-decoration: underline
 }
 a:focus, a:hover {
   color: white;
   background-color: black;
   text-decoration: none
 }