Focus order must be meaningful

Rule ID Focus 1
Definition The sequential focus order of links, form controls, embedded apps and widgets must be meaningful.
Purpose
  • The "tab" key is the primary key many browsers use to navigate the interactive elements on a web page.
  • The sequential order of the elements receiving focus can help a user understand the features on a web page.
  • The usability of frequently used or important interactive features of a web page can be improved by moving them to the beginning of the focus sequence.
Required Yes for HTML5 and ARIA Techniques ruleset mapping
WCAG Success Criteria

2.4.3 Focus Order (Level A, Primary Success Criterion)

Rule Category Keyboard Support
Scope Page
Target Resources a, area, input, textarea and select elements and elements with widget roles with tabindex values
  • a
  • applet
  • area
  • button
  • input
  • object
  • select
Techniques
  • Use document order to place related interactive items in a meaningful sequence.
  • The tabindex atttribute value (i.e. values greater than 0) can be used to change the sequence of focusable elements in a web page or make non-interactive elements part of the "tab" order of the page.
  • A tabindex values of less than 0 remove redundent interactive elements from the sequential focus order.
Manual Checks
  • Use the "tab" key to move focus through the links, form controls, embedded applications and widgets on the page.
  • Does the sequence of elements receiving focus make sense (i.e. related items on the page are navigated sequentially as a group).
Informational Links