On each web page, does the information remain understandable when style sheets are disabled?
Disable your browser's styles and watch what happens: elements remain in the order they are written in the HTML. This is the order that screen readers use, that keyboard navigation follows, and that users whose CSS failed to load see. If your page needs CSS to be understood, it fails criterion 10.3.
The criterion tests reading order above all. CSS allows visual reorganization of content: the order property in flexbox or grid, position: absolute, float. These techniques move elements on screen without touching the DOM. Result: a screen reader user reads the steps in order 3, 1, 2 while a sighted user reads them in order 1, 2, 3. This is not a nuance, it's a breakdown in meaning.
In practice, the order of your HTML elements must match the logical reading order. Headings before their paragraphs. Questions before their answers. Form steps in execution order. If you use CSS to reposition blocks, verify that the unstyled version remains coherent.
Un test to ensure that content remains understandable without CSS
Reading order without CSS
- Disable the page's stylesheets (via the Web Developer extension → CSS → Disable all styles, or in Firefox via View → Page Style → No Style).
- Read the content from top to bottom in the order it appears.
- Verify that the sequence remains logical: headings precede their contents, instructions appear before the fields they describe, numbered steps are in ascending order.
- If disabling styles creates an ambiguity or misunderstanding, the test fails.
Examples
❌ Non-compliant : Process steps reordered by CSS order
<style>
.steps { display: flex; flex-direction: column; }
.step-1 { order: 1; }
.step-2 { order: 2; }
.step-3 { order: 3; }
</style>
<div class="steps">
<p class="step-3">Step 3: validate your order.</p>
<p class="step-1">Step 1: add items to your cart.</p>
<p class="step-2">Step 2: enter your contact information.</p>
</div>Visually, the steps display in order 1-2-3 thanks to the order property. But in the DOM, the order is 3-1-2. A screen reader reads "Step 3" first. A user without CSS sees the steps in the wrong order, making the process incomprehensible.
✅ Compliant : Process steps in logical DOM order
<style>
.steps { display: flex; flex-direction: column; }
</style>
<div class="steps">
<p>Step 1: add items to your cart.</p>
<p>Step 2: enter your contact information.</p>
<p>Step 3: validate your order.</p>
</div>The order in the HTML matches the logical reading order. CSS can apply or not, the sequence remains coherent for all users, including those using a screen reader or keyboard navigation.
Tips and pitfalls
⚠️ The order property in flexbox and grid is the leading source of failure
Developers use order to adjust responsive layouts without modifying the HTML. On the surface, it works. But each modified order creates a gap between visual order and DOM order. In audits, this is the most common error on this criterion.
💡 Distinguish 10.2 and 10.3: visibility versus order
Criterion 10.2 verifies that visible content remains present (or has an alternative) when styles are disabled. Criterion 10.3 verifies that the order of content remains understandable. Two separate checks to conduct during an audit.
⚠️ position: absolute removes an element from normal flow
An element with position: absolute or fixed is placed visually according to its CSS coordinates, but its position in the DOM remains unchanged. If you position an article heading after its text in the HTML, it can appear before visually — and mislead screen reader users.
💡 Tab order follows the DOM, not visual order
Criterion 10.3 is directly linked to WCAG 2.4.3 (Focus Order). When CSS reorders interactive elements, keyboard navigation does not follow this visual order. The user jumps from one button to another in an order that does not match what they see on screen.
⚠️ Purely decorative emphasis is not a non-conformity
If CSS highlights content decoratively (color, size, border) without changing the meaning of the text, criterion 10.3 is not concerned. It is the order of elements in the DOM that is evaluated, not their visual appearance.
Frequently asked questions
How do I disable CSS to test RGAA criterion 10.3?
Three methods: (1) the Web Developer extension → CSS → Disable all styles — fastest for audits; (2) in Firefox, View menu → Page Style → No Style; (3) in DevTools, manually disable stylesheets in the Sources tab. The first option is recommended for speed.
Why can using grid-template-areas fail criterion 10.3?
Not necessarily. If grid-template-areas places blocks in the same logical order as the DOM, the criterion is met. The problem arises when the grid reverses or scrambles the order of content blocks. Always test by disabling styles to verify the sequence remains coherent.
What distinguishes RGAA criterion 10.3 from WCAG criterion 1.3.2?
WCAG 1.3.2 (Meaningful Sequence) poses the principle: the reading order determined by code must preserve meaning. RGAA criterion 10.3 operationalizes it with a concrete test method: disable CSS and verify understanding. WCAG 2.4.3 (Focus Order) applies as well whenever interactive elements are affected by CSS reordering.
How is the CSS class sr-only evaluated in RGAA criterion 10.3?
Yes, provided that this text fits logically into the reading sequence. When styles are disabled, sr-only text becomes visible. If it appears at a coherent location in the content flow, the criterion is met. If its position in the DOM creates a misunderstanding or reading break, it's a non-conformity.