Create a Logical Tab Order and Focus Order

Table of Contents

Overview

Not all users navigate the page with the mouse or a trackpad; some users only rely on keyboard to navigate. Many users with motor disabilities rely on a keyboard. Assistive technology users will also typically use a keyboard for navigation. In addition to traditional keyboards, some users may use a modified keyboard or other hardware that mimics the functionality of a keyboard.

Keyboard tab order allows keyboard users to properly navigate a web page. If tab order is implemented correctly a webpage will read similar to a book to a keyboard user. When done incorrectly a keyboard user may miss out or become confused with the order of the web page.

Ensure that when users navigate sequentially through content, they encounter information in a focus order that is consistent with the meaning of the content and can be operated from the keyboard.

Enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning.

Tab Order Guidelines

Keyboard accessibility is one of the most important aspects of web accessibility. Not all users navigate the page with the mouse or a trackpad; some users only rely on keyboard to navigate. Many users with motor disabilities rely on a keyboard. Assistive technology users will also typically use a keyboard for navigation. In addition to traditional keyboards, some users may use a modified keyboard or other hardware that mimics the functionality of a keyboard.

Keyboard tab order allows keyboard users to properly navigate a web page. If tab order is implemented correctly a webpage will read similar to a book to a keyboard user. When done incorrectly a keyboard user may miss out or become confused with the order of the web page.

Tab order is important for proper navigation through a keyboard interface. The keyboard tab order must be coordinated with the structure of the webpage. The default keyboard navigation order must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom – header first, then main navigation, then page navigation (if present), and finally the footer.

To adjust the tab order, the following methods can be applied using the tabindex attribute:

• tabindex= "0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.

• tabindex= "-1" removes the element from the navigation sequence, but can be made focusable using javascript. 

A tabindex= “1” or higher should NOT be used as it is a bad practice when it comes to accessibility because:

1. Normal flow in the keyboard tab order will be broken when tabbing through the interactive elements.

2. If content is dynamically added in between of elements with positive tabindex, it will interfere with the normal flow of tabbing.

General Guidelines

The best practices for keyboard tab order should include the following:      

• Tab order should have a logical reading order, similar to a book. It should be from left to right and top to bottom.

• As you are tabbing through a website, there must be a visible indication of where the tab focus is at.

• When using the tabindex to adjust the tab order, use tabindex= "0" or tabindex= "-1" ONLY

• Tabindex values of 1 or higher must NOT be used.

Example

The image below  shows the correct reading order on a page that has multiple navigation links on the side panels.

Open

Please see more detailed information on how to comply with this guideline.

Focus Order Guidelines

Keyboard users should be able to navigate content in a correct order.

Elements should receive focus in an order that preserves meaning.

Ensure that when users navigate sequentially through content, they encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard.

This reduces confusion by letting users form a consistent mental model of the content.

There may be different orders that reflect logical relationships in the content. For example, moving through components in a table one row at a time or one column at a time both reflect the logical relationships in the content.

The focus order may not be identical to the programmatically determined reading order as long as the user can still understand and operate the web page.

For example, a screen reader user interacts with the programmatically determined reading order, while a sighted keyboard user interacts with the visual presentation of the Web page. Care should be taken so that the focus order makes sense to both of these sets of users and does not appear to either of them to jump around randomly.

For example:

• Focusable components need to receive focus in an order that preserves meaning and operability only when navigation sequences affect meaning and operability.

• In those cases where it is required, there may be more than one order that will preserve meaning and operability.

• If there is more than one order that preserves meaning and operability, only one of them needs to be provided.

Please see more detailed information on how to comply with this guideline.

Provide Content In a Meaningful Sequence

Enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning.

It is important that it be possible to programmatically determine at least one sequence of the content that makes sense.

A sequence is meaningful if the order of content in the sequence cannot be changed without affecting its meaning. For example, if a page contains two independent articles, the relative order of the articles may not affect their meaning, as long as they are not interleaved. In such a situation, the articles themselves may have meaningful sequence, but the container that contains the articles may not have a meaningful sequence.

The semantics of some elements define whether or not their content is a meaningful sequence. For instance, in HTML, text is always a meaningful sequence. Tables and ordered lists are meaningful sequences, but unordered lists are not.

This helps people who rely on assistive technologies that read content aloud. The meaning evident in the sequencing of the information in the default presentation will be the same when the content is presented in spoken form.

Example 1:

In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.

Example 2:

CSS is used to position a navigation bar, the main story on a page, and a side story. The visual presentation of the sections does not match the programmatically determined order, but the meaning of the page does not depend on the order of the sections.

Example 3:

This example is to demonstrate how visual appearance may be enhanced via style sheets while still maintaining a meaningful presentation when style sheets are not applied. Using the positioning properties of CSS2, content may be displayed at any position on the user's viewport. Using structural elements ensures that the meaning of the content can still be determined when styling is not available.

In this example structural markup (definition lists) have been applied to the content. CSS has been used to style the content into columnar form. Each class absolutely positions the content into columns and the margins have been set to 0 to override the default behavior of user agents to display HTML definition lists with the DD element indented.

Here is the content to be displayed:

Here is the CSS which positions and styles the above elements:

When style sheets are applied, the data are displayed in two columns of "Products" and "Locations." When the style sheets are not applied, the text appears in a definition list which maintains the structure and reading order.

WCAG Related Guidelines

1.3.2 Meaningful Sequence (Level A)

2.4.3 Focus Order (Level A)