screen-reading-order
Ensure that the order of content presented to assistive technologies make sense and preserve its meaning.
Description
The order of the content in the source code does not match the visual presentation of the content. Assistive technologies like screen readers read the DOM linearly regardless of the display order. So when the DOM order and visual order do not match, there is a high chance that screen reader users will get the content in an illogical order or in a way that does not preserve its original meaning.
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.
- Ensure that there is no flex order that contradicts the DOM flow in a way that affects the meaning.
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)