Reading Order and Sensory Instructions
Preserve meaningful DOM reading order and write instructions that do not depend only on visual location, shape, sound, size, or color
WCAG 1.3.2 requires a meaningful programmatic sequence when order affects meaning. WCAG 1.3.3 requires instructions to identify controls without relying only on sensory characteristics such as “the green button on the right.” Neither criterion prohibits flexible visual layouts or sensory words; the information must also be available another way.
Reading order
Screen readers and keyboard navigation normally follow DOM order. CSS Grid, Flexbox order, absolute positioning, and responsive rearrangement can create a visual sequence that conflicts with the DOM. Author content in the intended reading and interaction order, then use CSS that preserves that logic. Tables and forms also need programmatic relationships, not merely visual alignment.
Visual Reordering vs. Matching DOM and Visual Order
- Confirm the order
- Choose delivery
- Enter the address
Select the green button on the right.
View inaccessible code
<ol class="steps"><li class="last">Confirm</li><li class="first">Choose</li>…</ol>
<p>Select the green button on the right.</p>- Choose delivery
- Enter the address
- Confirm the order
Select Continue after checking the address.
View accessible code
<ol><li>Choose delivery</li><li>Enter the address</li><li>Confirm the order</li></ol>
<p id="continue-help">Select <strong>Continue</strong> after checking the address.</p>
<button aria-describedby="continue-help">Continue</button>Test it
Read the DOM without CSS, traverse with a screen reader, tab through controls, and compare each order with the visual sequence at desktop and narrow widths. Check that every instruction names visible text, an accessible label, or another non-sensory identifier.