DOM order

Keyboard navigation sequences should retain the visually presented meaning and logic

Who might be affected
SR
KB

Description

Sometimes the logical sequence of the keyboard navigation breaks. This might happen, for various reasons, when the content flow on the page is different from its visual layout in a way that changes its meaning. The factors that might cause this situation can be absolute positioning, usage of positive tabintex and order setting using flex/grid.

Quick Fixes

  • As a rule of thumb, make sure that the logical flow of the content matches the DOM flow.
  • Avoid establishing layouts based on absolute positioning.
  • Avoid using positive tabindex values (with the exception of "skip links").

How Users Are Affected

Screen readers read page content in a linear order, which is defined by the DOM order. Content that does not flow in a logical way (for the user to understand in sequential navigation) may confuse or disorient users when assistive technology reads the content in the wrong order.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.2 Meaningful Sequence (A) | 2.4.3 Focus Order (A)

Recommended Reading