Focus Order (Relationships):
Understanding SC 2.4.3
2.4.3 Focus Order (Relationships): If a Web page can be navigated sequentially [begin add] and the navigation sequences affect meaning or operation[end add], focusable components receive focus in an order that preserves meaning and operability. (Level A)
Intent of this Success Criterion
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, move 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 left 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 SC 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.
Specific Benefits of Success Criterion 2.4.3:
These techniques benefit keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.
People with mobility impairments who must rely on keyboard access for operating a page benefit from a logical, usable focus order.
People with disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected. They benefit from a logical focus order.
People with visual impairments can become disoriented when tabbing takes focus someplace unexpected or when they cannot easily find the content surrounding an interactive element.
Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.
Examples of Success Criterion 2.4.3
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. In this case, the navigation should follow relationships and sequences in the content. 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").
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 left 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.
A Web page implements modeless dialogs via scripting. When the trigger button is activated, a dialog opens. The interactive elements in the dialog are inserted in the focus order immediately after the button. When the dialog is open, the focus order goes from the button to the elements of the dialog, then to the interactive element following the button. When the dialog is closed, the focus order goes from the button to the following element.
A Web page implements modal dialogs via scripting. When the trigger button is activated, a dialog opens and focus is set to the first interactive element in the dialog. As long as the dialog is open, focus is limited to the elements of the dialog. When the dialog is dismissed, focus returns to the button or the element following the button.
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.
Note: While this example passes the SC, 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.
Related Resources
Resources are for information purposes only, no endorsement implied.
(none currently documented)
Techniques and Failures for Success Criterion 2.4.3 [Focus Order (Relationships)]
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this success criterion. The techniques listed only satisfy the success criterion if all of the WCAG 2.0 conformance requirements have been met.
Sufficient Techniques
Giving focus to elements in an order that follows sequences and relationships within the content using one of the following techniques:
H4: Creating a logical tab order through links, form controls, and objects (HTML)
Making the source order match the visual order (future link)
Changing a web page dynamically using one of the following techniques:
SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element (Scripting)
Creating custom dialogs in a device independent way (future link)
SCR27: Reordering page sections using the Document Object Model (Scripting)
Additional Techniques (Advisory)
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
- [begin add]
Providing a highly visible highlighting mechanism for links or controls when they receive keyboard focus (future link) [1980]
[end add] Creating alternative presentation orders (future link)
Failures
The following are common mistakes that are considered failures of Success Criterion 2.4.3 by the WCAG Working Group.
Failure of SC 2.4.3 due to using menus or dialogs that are not adjacent to their trigger control in the sequential navigation order
Key Terms
- navigated sequentially
navigated in the order defined for advancing focus (from one element to the next) [begin change]using[end change] the keyboard
- Web page
[begin add]a non-embedded resource [begin delete]that is referenced by a URI[end delete] [begin add]obtained from a single URI using HTTP[end add] plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent [end add] [begin delete]a resource that is referenced by a URI and is not embedded in another resource, plus any other resources that are used in the rendering or intended to be rendered together with it[end delete] [1948]
Note 1: Although any "other resources" would be rendered together with the primary resource, they would not necessarily be rendered simultaneously with each other.
Note 2: For the purposes of conformance with these guidelines, a resource must be "non-embedded" within the scope of conformance to be considered a Web page.
Example 1: A Web resource including all embedded images and media.
Example 2: A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program lives entirely at http://example.com/mail, but includes an inbox, a contacts area and a calendar. Links or buttons are provided that cause the inbox, contacts, or calendar to display, but do not change the URL of the page as a whole.
Example 3: A customizable portal site, where users can choose content to display from a set of different content modules.
Example 4: When you enter "http://shopping.example.com/" in your browser, you enter a movie-like interactive shopping environment where you visually move about a store dragging products off of the shelves around you [begin add]and[end add] into a visual shopping cart in front of you. Clicking on a product causes it to be demonstrated with a specification sheet floating alongside.