Disabilities Affected: Cognitive, Visual
When the sequence in which content is presented affects its meaning, that correct reading sequence must be programmatically determinable.
Why It Matters
Assistive technologies typically read content based on the order it appears in the source code (DOM order). If CSS is used to visually rearrange content (e.g., positioning columns in a different visual order than their source order), the reading order for screen readers might become illogical and confusing, destroying the meaning.
Fixing the Issue
Ensure the source order of content in your HTML reflects the logical reading order. Use CSS primarily for styling and layout, but avoid using it in ways that fundamentally change the meaning conveyed by the sequence. For example, if using CSS Grid or Flexbox to change visual order, double-check that the resulting DOM order still makes sense when read linearly. Use semantic structure (headings, lists, paragraphs) correctly to reinforce the logical flow.
Good Code Example
Source order matches logical reading order:
-
<section>
<h2>Instructions</h2>
<div class="step">
<h3>Step 1: Gather Ingredients</h3>
<p>Details about ingredients...</p>
</div>
<div class="step">
<h3>Step 2: Mix Dry Components</h3>
<p>Details about mixing...</p>
</div>
</section>
<style>
/* CSS can style these, e.g., add borders, spacing */
.step { margin-bottom: 1em; border: 1px solid #eee; padding: 1em; }
</style>
-
Instructions
Step 1: Gather Ingredients
Details about ingredients…
Step 2: Mix Dry Components
Details about mixing…
Bad Code Example
CSS visually rearranges content, making the source order illogical:
-
<div class="container">
<div class="content-part" id="part2">
<h2>Part 2: The Conclusion</h2>
<p>Concluding remarks...</p>
</div>
<div class="content-part" id="part1">
<h2>Part 1: The Introduction</h2>
<p>Introductory text...</p>
</div>
</div>
<style>
/* CSS Flexbox used to visually place Part 1 before Part 2 */
.container { display: flex; flex-direction: column; }
#part1 { order: 1; /* Visually first */ }
#part2 { order: 2; /* Visually second */ }
/* A screen reader will read Part 2 first, then Part 1, which is confusing */
</style>
-
Part 2: The Conclusion
Concluding remarks…
Part 1: The Introduction
Introductory text…
