Reading Order/Focus Order
Last updated
Was this helpful?
Last updated
Was this helpful?
Topic
Technique
WCAG AA Requirement
Reading Order
Reading Order: The reading order MUST be logical and intuitive. Note: The default reading order is determined by the order of the elements in the DOM.
Required
Focus Order
Focus Order: The navigation order of focusable elements MUST be logical and intuitive.
Note 1: Focusable elements include links, form inputs and controls, buttons, and any element with a tabindex
value of 0
or greater.
Note 2: The default reading order is determined by the order of the focusable elements in the DOM.
Note 3: Use the tab key to navigate forward through focusable elements, and shift + tab to navigate backward.
Required
Tabindex
Positive values: A tabindex
of positive values (e.g. tabindex="1"
, tabindex="2"
, etc.) SHOULD NOT be used, because the result is almost always an illogical reading and/or tab order.
best practice
Zero: Use tabindex="0"
to make a custom widget or control focusable, if it is not already focusable.
Note: Use natively focusable elements whenever possible (e.g. links, form inputs and controls, buttons), rather than custom controls, for simplicity in markup and implementation.
best practice
Negative 1: Use tabindex="-1"
to allow JavaScript to send the focus to an element, without putting it in the focus order.
best practice