Definition for WCAG 2.0 success criterion 2.4.3
2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
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").
Note: for success criteria involving keyboard testing, ensure that your browser/OS is set to allow for full keyboard navigation. In macOS in particular, go to System Preferences > Keyboard > Shortcuts and ensure that the "Full Keyboard Access" option is set to "All controls".
Note: if the page does not contain any focusable components, this criterion is marked as not applicable.
Testing success criterion 2.4.3
Input into spreadsheet
- Fail
- The focus order is not logical (focus jumps to different parts of the page in a way that is confusing, unexpected, and detrimental to meaning and operability); if alerts/dialogs/overlays are used, focus is either not programmatically moved to the container element or not correctly managed/retained inside the container.
- Pass
- The focus order is logical, matches expected order based on layout, and - in the case of alerts/dialogs/overlays - is managed correctly.
How to test
- Sequentially navigate the page with the keyboard, using TAB / SHIFT+TAB to move the focus from one focusable element (such as links, form controls, image map areas) to the next. Ensure that the order in which these components receive focus is logical.
- For sighted keyboard users, it is also important that the focus order matches the expected order of the visual layout presented.
-
In the case of functionality such as alerts and modal dialogs/overlays, ensure that focus is managed correctly:
- Focus is moved to the relevant container element when it is opened.
- Focus is maintained inside the container (preventing users from accidentally moving the focus out of the alert/dialog/overlay).
- When the alert/dialog/overlay is closed, focus is returned to the most logical place in the page (generally, the element that triggered the alert/dialog/overlay).