A: The visual order on the page follows the DOM order (WCAG 1.3.2)
visual-order-follows-dom
This means
The order of content in the code (DOM) should correspond to the visual representation on the page. This means that elements that are displayed at the top or on the left should also appear before the elements below or to the right in the source code. This ensures that the content structure remains comprehensible for screen readers, keyboard navigation, and other assistive technologies.
Impact
If the visual and DOM order differ, users with screen readers or keyboard control experience the page in a different order than what is visible. This can lead to confusion, and important content may be overlooked or read aloud in the wrong context. The error violates WCAG 1.3.2 (A) Semantic Order.
Recommendation
- Ensure that the HTML structure is logical and follows the visual layout.
- Only use CSS properties such as flexbox or grid to rearrange elements visually, not to change the order of the content.
- Regularly check with the keyboard or a screen reader to ensure that the reading flow corresponds to the visible structure.
- Avoid visually moving important content to a different position than it appears in the DOM.
Examples
Problematic:
<div style="display:flex; flex-direction:row-reverse;">
<button>Back</button>
<button>Next</button>
</div>
Visually, the Next button appears on the right, but in the DOM it comes before Back. Screen readers therefore read Nextfirst, which is confusing.
Better:
<div style="display:flex;">
<button>Back</button>
<button>Next</button>
</div>
Here, the visual order corresponds to the actual structure in the DOM. Screen readers and keyboard users experience the same order.
Note
Visual adjustments made using CSS must not change the flow of the content. The DOM order is decisive for the perception and orientation of assistive technologies – it determines what is read or focused on first.
Related WCAG criterion:
WCAG 1.3.2 – Order of Importance