Reading and Focus Order

Reading and Focus Order

Accessibility Techniques for Reading Order/Focus Order
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.
Testing methodology 1.3.2.a
Required
WCAG 1.3.2
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.
Testing methodology 2.4.3.a
Required
WCAG 2.4.3
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