Meaningful Reading Order: The Decisions That Matter
Making sure the order in which content is read by a screen reader or reached by keyboard matches the order that makes sense, whatever the visual layout.
Marcus Adeyemi
What is at stake
CSS can place content anywhere on screen regardless of source order, and when the two disagree, screen reader and keyboard users receive the page in a confusing sequence.
The playbook
- Write the HTML in the order the content should be read
- Use CSS reordering only for decorative changes
- Check reading order after responsive layout changes
- Test with a screen reader's reading mode
- Review order in multi-column and card layouts
Where it goes wrong
Avoid:
- Using flexbox order to move important content
- Sidebars that come first in the code but read last visually
- Modals placed at the end of the document without focus management
- Columns that read across rather than down
The numbers behind it
| Measure | Figure |
|---|---|
| WCAG 1.3.2 Meaningful Sequence, A | when order affects meaning, the correct reading sequence can be determined programmatically |
| Common cause | reordering with CSS flexbox order, grid placement or absolute positioning |
| WCAG 2.4.3 Focus Order, A | focusable components receive focus in an order that preserves meaning |
| Testing | read the page with styles disabled or with a screen reader |
Getting outside help
When to hand it over: Bring in help when layouts rely heavily on CSS reordering, or when screen reader users report confusing pages.
Where this comes from
- W3C Web Accessibility Initiative — Understanding SC 1.3.2 Meaningful Sequence
- MDN Web Docs — Ordering flex items
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
