On each web page, does visible content conveying information remain present when style sheets are disabled?
Some users apply their own stylesheets to adapt the display: high contrast, dyslexic font, increased text size. When informative content is generated solely by CSS, it disappears for them. The information was there visually, but it didn't exist in the HTML.
Criterion 10.2 targets precisely this case: any visible content bearing information must remain present when CSS is disabled. The most frequent non-conformities found in audits are informative CSS background images without text alternative, icons inserted via the content property of ::before / ::after pseudo-elements without hidden text, and drawings created entirely in CSS.
If your call button displays only a phone icon inserted via content: '\260E' and no text in the HTML, the user loses any indication of the button's function as soon as CSS is disabled. This is not a layout issue: it is a loss of information.
To audit this criterion, use the Web Developer extension (Firefox or Chrome), CSS menu > Disable All Styles, and compare the page without styles with the normal version. Any informative content that disappears without alternative in the DOM is a non-conformity.
Un test to verify that content remains visible without CSS
Informative content visible without CSS
- Disable all stylesheets on the page (Web Developer extension: CSS > Disable All Styles).
- Compare the page without CSS with the normal version.
- For each visible element that carried information in the styled version, verify that it is still present in the version without CSS.
- Check first priority: informative background images (
background-image), icons viacontenton::before/::after, informative CSS drawings. - If informative content has disappeared and has no alternative in the HTML (hidden text,
aria-label,altattribute...) : the test fails. - If all visible informative contents remain present: the test is validated.
Examples
❌ Non-compliant : Button with icon only inserted via CSS content
<style>
.btn-call::before {
content: '\260E';
font-size: 1.5rem;
}
</style>
<button class="btn-call"></button>The phone icon is generated by CSS. The button contains no text in the HTML. Without CSS, the button is empty: the user doesn't know what it does. The informative content has disappeared with the styles.
❌ Non-compliant : Logo as CSS background image without text alternative
<style>
.logo {
background-image: url('logo-entreprise.png');
width: 200px;
height: 80px;
display: block;
}
</style>
<a href="/" class="logo"></a>The logo is a CSS background image. Without CSS, the link is completely empty: neither image nor text. The user doesn't know where this link leads or which organization it represents. Criterion 10.2 fails, and criterion 1.1 (text alternative) is probably also in failure.
✅ Compliant : Logo as CSS background image with hidden text as alternative
<style>
.logo {
background-image: url('logo-entreprise.png');
width: 200px;
height: 80px;
display: block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
</style>
<a href="/" class="logo">
<span class="sr-only">Home, Company XYZ</span>
</a>The hidden text via .sr-only remains in the HTML DOM. When CSS is disabled, this text becomes visible again: the user reads "Home, Company XYZ". The information is preserved. The screen reader was already reading it; now the user who disables CSS also has access to it.
Tips and pitfalls
⚠️ Confusing "broken layout" and "missing content"
Criterion 10.2 does not require the page to remain visually readable without CSS. It requires that information visible in the styled version is still present in the DOM. A logo that resizes awkwardly without CSS: not a failure. A logo that disappears because it was a CSS background image without alternative: failure.
⚠️ Icon fonts (Font Awesome, Material Icons) are systematically affected
Icon fonts use content on a pseudo-element to display the glyph. Without CSS, the icon disappears or displays an illegible character. If the icon is the only way to convey the information, an alternative in the HTML is required: adjacent hidden text, aria-label on the parent interactive element, or title if it's a link.
⚠️ The CSS content property is not reliably rendered by all screen readers
Even with CSS enabled, an icon inserted via ::before and content is not announced reliably. NVDA with Firefox sometimes restores it, VoiceOver on Safari does not do so consistently. Text alternative remains essential for any informative content, regardless of criterion 10.2.
💡 Hidden text solves both criterion 10.2 and accessibility to assistive technologies
A <span class="sr-only"> in the HTML remains present when CSS is disabled and becomes visible. The screen reader was already reading it in the styled version. Two conformities ensured by a single implementation.
⚠️ Purely decorative contents are not targeted
A CSS background image that is purely aesthetic (section background, graphical separator without text) is not within the scope of criterion 10.2. The question to ask: "if this element disappeared, would the user lose information?" If not, there is nothing to preserve.
Frequently asked questions
Why does criterion RGAA 10.2 protect users who browse without stylesheets?
Rarely in a complete way. However, display personalization extensions (high contrast, dyslexia) override certain CSS properties without touching content. The practical scope of the criterion is therefore narrower than its title suggests. That said, icons generated by content are also poorly rendered by some screen readers with CSS active. Text alternative remains necessary in all cases.
How to verify RGAA criterion 10.2 during an accessibility audit?
Use the Web Developer extension (Firefox or Chrome): CSS > Disable All Styles. Then compare with the normal version and look first for informative background images (background-image), icons on ::before / ::after, and elements without HTML text. To identify candidates before disabling styles, inspect pseudo-elements in DevTools: any non-empty content on an interactive or informative element is suspect.
When should a logo as CSS background image be migrated to an <img> tag?
Not necessarily. You can keep the CSS background image and add hidden text in the HTML (<span class="sr-only">Organization name</span>). Migrating to <img alt="..."> is another valid solution, often cleaner semantically. Both approaches satisfy criterion 10.2.
What is the difference between RGAA criterion 10.2 and criterion 1.1 on text alternatives?
Criterion 1.1 concerns HTML images (<img>, SVG, <canvas>...) and their alternative for assistive technologies, CSS active or not. Criterion 10.2 concerns content generated by CSS that physically disappears when styles are disabled. An informative background image without alternative generally violates both: missing content without CSS (10.2) and missing alternative for assistive technologies (1.1).
How does RGAA criterion 10.2 apply to inline SVG elements?
No. An inline SVG is part of the HTML DOM: it remains present when CSS is disabled. However, if this SVG is informative and lacks a <title> or aria-label, it falls under criterion 1.1. Criterion 10.2 applies only to content generated or displayed exclusively via CSS.