The intent of this Success Criterion is to 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. Either order may satisfy this Success Criterion.
The way that sequential navigation order is determined in Web content is defined by the technology of the content. For example, simple HTML defines sequential navigation via the notion of tabbing order. Dynamic HTML may modify the navigation sequence using scripting along with the addition of a tabindex attribute to allow focus to additional elements. If no scripting or tabindex attributes are used, the navigation order is the order that components appear in the content stream. (See HTML 4.01 Specification, section 17.11, "Giving focus to an element").
An example of keyboard navigation that is not the sequential navigation addressed by this Success Criterion is using arrow key navigation to traverse a tree component. The user can use the up and down arrow keys to move from tree node to tree node. Pressing the right arrow key may expand a node, then using the down arrow key, will move into the newly expanded nodes. This navigation sequence follows the expected sequence for a tree control - as additional items get expanded or collapsed, they are added or removed from the navigation sequence.
The focus order may not be identical to the programmatically determined reading order (see Success Criterion 1.3.2) as long as the user can still understand and operate the Web page. Since there may be several possible logical reading orders for the content, the focus order may match any of them. However, when the order of a particular presentation differs from the programmatically determined reading order, users of one of these presentations may find it difficult to understand or operate the Web page. Authors should carefully consider all these users as they design their Web pages.
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.
Focus order needs to allow the user to navigate focusable elements in a logical order, and that order needs to preserve any meaning or operation that the page is conveying. Focus order does not necessarily need to follow the visual layout of the web page, as long as the order in which elements receive focus is logical, and the hierarchy and relationship of content implied by the visual presentation is preserved. For instance, in a two-column layout, the assumption in western left-to-right systems may be that focus moves through the elements in the left-hand column first, from the top to the bottom of the column, and then proceed to the right-hand column. However, if the two columns are independent of each other, and meaning/operation are not affected, it is not a failure if elements in the right-hand column receive focus first, followed by the elements in the left-hand column. As a best practice, though, make sure the focus order reinforces the reading order implied by the visual layout.
It is not a failure of this Success Criterion if static/non-interactive content receives focus. Making an element that does not act as an actionable user interface component focusable, or programmatically moving focus to such an element, does not necessarily constitute a failure of this Success Criterion. This situation is a failure if these additional focus stops impede the operation of the content, or create confusing and/or illogical focus orders - for example, a control appearing to receive focus multiple times due to the use of nested focusable elements.
<div tabindex="0"><button>...</button></div>As a best practice, avoid having unwarranted focusable elements which cannot be operated or actioned, as these are likely to make operation tedious for keyboard users.
For clarity:
These techniques benefit keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.
An HTML Web page is created with the left hand navigation occurring in the HTML after the main body content, and styled with CSS to appear on the left hand side of the page. This is done to allow focus to move to the main body content first without requiring tabIndex attributes or JavaScript.
While this example passes the Success Criterion, it is not necessarily true that all CSS positioning would. More complex positioning examples may or may not preserve meaning and operability
The following example fails to meet the Success Criterion:
A company's Web site includes a form that collects marketing data and allows users to subscribe to several newsletters published by the company. The section of the form for collecting marketing data includes fields such as name, street address, city, state or province, and postal code. Another section of the form includes several checkboxes so that users can indicate newsletters they want to receive. However, the tab order for the form skips between fields in different sections of the form, so that focus moves from the name field to a checkbox, then to the street address, then to another checkbox.
Giving focus to elements in an order that follows sequences and relationships within the content using one of the following techniques:
Changing a Web page dynamically using one of the following techniques: