Goal
Ensure that content is presented in a meaningful reading and navigation order so that users relying on assistive technologies (like screen readers) can understand the information in the intended sequence.
The visual layout of a page may suggest a reading order that differs from the DOM (Document Object Model) order. If the DOM order does not match the intended logical flow, screen reader users may encounter information in a confusing or incorrect sequence.
Key points:
- Content should be coded in the order it should be read.
- Decorative elements should not interfere with the reading order.
- Logical flow should follow headings, paragraphs, and lists in a natural sequence.
This ensures users who cannot see the page can still understand the information as intended.
Example Issues and Fixes
DOM order does not match visual layout
Fail
<div class="flex w-full flex-col items-start justify-start gap-4 p-8">
<div class="grid w-full grid-cols-2 gap-8">
<div class="shrink-0 bg-gray-100 text-gray-900 p-4">Right Column Content</div>
<div class="shrink-0 bg-gray-100 text-gray-900 p-4">Left Column Content</div>
</div>
</div>
Right Column Content
Left Column Content
Pass
<div class="flex w-full flex-col items-start justify-start gap-4 p-8">
<div class="grid w-full grid-cols-2 gap-8">
<div class="shrink-0 bg-gray-100 text-gray-900 p-4">Left Column Content</div>
<div class="shrink-0 bg-gray-100 text-gray-900 p-4">Right Column Content</div>
</div>
</div>
Left Column Content
Right Column Content
Decorative elements interrupt reading flow
Fail
<div class="flex w-full flex-col items-start justify-start gap-4 p-8">
<p class="text-3xl font-bold">Welcome to our site.</p>
<img class="w-6 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/star-1.png" alt="">
<p>We provide web design services.</p>
</div>
Welcome to our site.
We provide web design services.
Pass
<div class="flex w-full flex-col items-start justify-start gap-4 p-8">
<p class="text-3xl font-bold">Welcome to our site.</p>
<img class="w-6 h-auto" src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/star-1.png" alt="" role="presentation">
<p>We provide web design services.</p>
</div>
Welcome to our site.
We provide web design services.
Quick Checklist
- Verify that DOM order matches logical reading order.
- Place content in the sequence users expect (headings, paragraphs, lists).
- Ensure decorative elements do not disrupt flow (
alt="",role="presentation"). - Test using a screen reader to confirm the reading sequence is correct.