Focus Order:
Understanding SC 2.4.3
2.4.3 If a Web page can be navigated sequentially, focusable components receive focus in an order that follows information and relationships conveyed through presentation. (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 reflects the logical relationships in the content. 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 would satisfy this success criterion.
An additional example of navigation 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 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").
Specific Benefits of Success Criterion 2.4.3:
These techniques benefit users who navigate documents sequentially and expect the tab order to match the sequential reading order. People with visual impairments or people with disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected.
Examples of Success Criterion 2.4.3
Example that fails to meet the success criterion: : An on-line subscription form.
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.
An individual using a screen magnifier fills in the form. Because of the level of magnification, only a small portion of the page is visible. She tabs through the fields, entering her name, then her street address. However, the next field in tab order is not the field for the city, but the checkbox beside the name of a newsletter. The user assumes that she has provided all of the necessary address information and presses Enter to submit the form. She is surprised when she receives an error message telling her that one or more required fields is incomplete.
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]
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:
Additional Techniques (Advisory) for 2.4.3
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.
(none currently documented)
Failures for SC 2.4.3
The following are common mistakes that are considered failures of Success Criterion 2.4.3 by the WCAG Working Group.
Key Terms
- navigated sequentially
navigated in the order defined for advancing focus from one element to the next with the keyboard
- presentation
rendering of the content in a form to be perceived by users
- Web page
[begin add]a non-embedded resource that is referenced by a URI 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 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 into a visual shopping cart in front of you. Clicking on a product causes it to be demonstrated with a specification sheet floating alongside.