🖋️
Web Accessibility Resources
  • Web Accessibility
  • Cheat Sheets
    • Structure and Semantics
      • Page Title
      • Language
      • Headings
      • Landmarks
      • Lists
      • Tables
      • Iframes
      • Markup Validity
      • Other Semantic Elements
    • Links & Navigation
      • Links
      • Site Navigation
      • Within-Page Navigation
      • Reading Order/Focus Order
    • Images & Visual Design
      • Images
      • Color & Contrast
      • Text Styles, Resize, Reflow, and Zoom
      • Visual Cues
      • Adaptive and Responsive Output
    • Multimedia, Animations, and Motion
      • Audio and Video
      • Animation, Motion, and Timed Content
    • User Input, Forms, and Dynamic Content
      • Device-Independent User Input
      • Form Input, Labels, and Instructions
      • Form Validation and Feedback
      • Dynamic Content (JavaScript, AJAX)
      • Custom Widgets (JavaScript, ARIA)
      • CAPTCHA
    • Keyboard Commands
  • Semantic Group Labels
Powered by GitBook
On this page

Was this helpful?

  1. Cheat Sheets
  2. Links & Navigation

Reading Order/Focus Order

PreviousWithin-Page NavigationNextImages & Visual Design

Last updated 5 years ago

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

WCAG 1.3.2
WCAG 2.4.3