Movement through a web page or application should follow a logical order that mirrors the visual order of navigation and controls. Users navigating by keyboard (using Tab key) expect to move sequentially from left to right, top to bottom. Screen reader users expect the same. When the reading order doesn’t match the visual order, users can become confused and may miss important content.
Why this matters
Tab order determines how keyboard users navigate through interactive elements. Reading order determines how screen readers present content. When these don’t match the visual layout, users get confused or miss content entirely. A logical tab and reading order is essential for keyboard navigation and screen reader usability.
Techniques
HTML Order
- Ensure order of items in source code matches visual order
- Test by navigating with keyboard alone using Tab key
- Should access all links and controls in predictable, logical order
The tabindex attribute in HTML:
- tabindex=”0″ – Adds element to tab order (for non-focusable elements like div)
- tabindex=”-1″ – Not in tab order by default but can receive focus via JavaScript
- Positive integers – Specifies focus order. AVOID THIS – overrides default tab order and has unexpected consequences
UGA CMS developers should confirm tab order in custom themes/components
PDF Documents Order
- In Adobe Acrobat Pro: View – Tools – Accessibility – Reading Order
- In Reading Order window: select “Show page content groups” and “Page content order”
- Provides visual indication of approximate reading order
- Click “Show Order Panel” button, then drag content blocks into logical reading order
- In Tag Tree: drag any out-of-order items to their appropriate place
PDF Forms Order
- Test by opening form in any PDF reader and pressing Tab through form fields
- Fields highlighted as they receive focus
- If fields not in expected sequence, correct in Acrobat Pro:
Go to View – Tools – Forms – Edit. All form fields listed in tab order in sidebar panel. Drag fields to correct position.
Common mistakes
- Using positive tabindex values to override natural tab order
- CSS reordering that doesn’t match DOM order, causing visual and tab order mismatch
- Modal dialogs without focus trapping, allowing users to tab outside the dialog
- Dynamically added content inserted in the wrong DOM position
- Removing interactive elements from tab order that should be accessible
- Focus not returning to the trigger element after closing a dialog
WCAG 2.1 Success Criteria
- 1.3.2 Meaningful Sequence (Level A)
- 2.4.3 Focus Order (Level A)
Getting help
If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.
- Contact DASH at [email protected] for consultations, training, or technical assistance.
Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.