Each image of text conveying information must, in the absence of a replacement mechanism, be replaced by styled text where possible. Is this rule followed (except in special cases)?
A user who enlarges their font to 200% or replaces the site's font with a dyslexia-friendly typeface can do so with HTML text. Faced with an image, their browser can do nothing: the text is frozen in pixels. That is the concrete problem with criterion 1.8.
The rule is simple: if you used an image because you wanted a specific typographic rendering, first ask yourself, "Wouldn't a web font and CSS do the same thing?". In the vast majority of cases, yes. @font-face, CSS variables, drop shadows, text gradients: CSS is capable of reproducing effects that many developers still believe are reserved for images.
When a text image is unavoidable, two solutions are valid: offer a replacement mechanism (for example a button that switches to a text version of the page), or demonstrate that the graphic effect used cannot technically be reproduced in CSS—a real photographic texture embedded in the letters, for example. The bar is high.
The criterion applies to six types of HTML elements: <img>, <input type="image">, <object>, <embed>, <canvas> and <svg> whose text is not structured via <text> elements.
6 tests to confirm the correct replacement of text images
Text image <img> and role="img"
- Identify all
<img>and elements withrole="img"that contain informational text. - For each one, check one of the two following conditions: a. A replacement mechanism allows obtaining an equivalent text version. b. The graphic effect applied to the text (texture, physical distortion, etc.) cannot be reproduced in CSS.
- If no condition is met for at least one element, the test fails.
Text image button <input type="image">
- Identify all
<input type="image">buttons whose image displays informational text. - For each one, verify: a. Is a text replacement mechanism provided? b. Or does the graphic effect of the text go beyond what CSS can reproduce?
- If no condition is met for at least one button, the test fails.
Text image object <object>
- Identify all
<object type="image/…">elements that display informational text. - For each one, verify: a. Is a replacement mechanism available? b. Or is the graphic effect applied to the text impossible to reproduce in CSS?
- If no condition is met, the test fails.
Embedded text image <embed>
- Identify all
<embed type="image/…">elements that contain informational text. - For each one, verify: a. Is a text replacement mechanism provided? b. Or does the graphic effect of the text go beyond what CSS can reproduce?
- If no condition is met, the test fails.
Bitmap text image <canvas>
- Identify all
<canvas>elements that display informational text via the Canvas API (text drawn withfillText()orstrokeText()). - For each one, verify: a. Is a replacement mechanism available (text version accessible in the DOM)? b. Or is the graphic effect applied to the text impossible to reproduce in CSS?
- If no condition is met for at least one canvas, the test fails.
Vector text image <svg> without <text>
- Identify
<svg>elements carrying information whose text is rendered as a graphic path (<path>) rather than via<text>elements. If the text is in<text>, this test does not apply. - For each SVG concerned, verify: a. Is a replacement mechanism available? b. Or is the graphic effect of the text impossible to reproduce in CSS?
- If no condition is met, the test fails.
Examples
❌ Non-compliant : Section title displayed as text image
<img src="titre-nos-services.png" alt="Our services">The image displays the text "Our services" with a custom font. The alt attribute is present, so criterion 1.1 is respected. But not 1.8: no replacement mechanism exists, and this typographic effect can be reproduced with @font-face. A user enlarging the text gets a pixelated image instead of smooth characters.
✅ Compliant : Same title with web font and CSS
<style>
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
}
.titre-services {
font-family: 'MyFont', sans-serif;
font-size: 2rem;
color: #1a2b4c;
letter-spacing: 0.05em;
}
</style>
<h2 class="titre-services">Our services</h2>The text is in the HTML DOM, styled with the same font as before in the image. The user can enlarge, change font, or modify colors via their browser. The visual rendering is identical. Without any image.
✅ Compliant : Text image with valid replacement mechanism
<img src="titre-texture-photo.png" alt="Innovation & Design">
<p>
<a href="/text-version">Access the text version of this page</a>
</p>When the graphic effect is truly impossible to reproduce in CSS (here, a photographic texture embedded in the letters), offering a visible and accessible replacement mechanism validates the criterion. The user switches to a version where content is in native HTML text.
Tips and pitfalls
⚠️ Believing that CSS cannot replace text images
This is the most common audit error. Teams use images because they want a specific font, a legitimate constraint in 2008, no longer in 2024. @font-face, background-clip: text, text-shadow, variable fonts: CSS today reproduces advanced typographic effects. Before validating a text image as "justified", demand a demonstration that CSS fails.
⚠️ Logos, brand names and CAPTCHAs: criterion not applicable
A company logo containing the brand name, an official brand name, a CAPTCHA or test image are explicitly excluded from criterion 1.8. The same applies to any image whose graphic precision is essential to conveying the information. Mention them in your accessibility statement if you encounter them during an audit.
💡 An <svg> with <text> elements escapes test 1.8.6
Test 1.8.6 targets SVGs whose text is rendered as a graphic path (<path>), not via <text> elements. If your SVG uses <text>, the text is in the DOM and remains selectable by the browser. This test then does not apply to that element. Check the SVG source code, not just its visual rendering.
⚠️ Confusing criterion 1.1 and criterion 1.8 compliance
An <img> with good alt text satisfies criterion 1.1 (text alternative for screen readers), but remains non-compliant with 1.8 if the visible text could be replaced by styled text. The two criteria are independent: 1.1 concerns access to information, 1.8 concerns customization of display. Succeeding at one does not guarantee the other.
💡 Audit quickly: disable images in your browser
To detect text images without inspecting each line of code, disable image display in your browser (Web Developer extension → Images → Disable Images). Any text that disappears and whose alt does not cover the information is a candidate for criterion 1.8. Practical for a first sweep before manual code inspection.
Frequently asked questions
What is a replacement mechanism in the context of RGAA criterion 1.8?
It is a device that allows the user to obtain a text version of the content displayed as an image. For example: a link to a text version of the page, a button that toggles the rendering between image and HTML text, or a preference in the site's settings. This mechanism itself must be accessible and usable without needing to see the text image.
How does RGAA criterion 1.8 apply to company logos containing the brand name?
It does not. Logos and brand names are explicitly excluded from criterion 1.8 (special case). However, ensure that criterion 1.1 is respected: the logo must have a relevant text alternative via alt or aria-label, describing the brand or the function of the link if it is clickable.
How do you distinguish in RGAA 1.8 a justified graphic effect from simple lack of effort?
The bar is high. A drop shadow, a gradient, a custom font, transparency: CSS handles them. What cannot be reproduced: a real photographic texture embedded in the letters, a physical reflection on a three-dimensional object, or a rendering from a design software without CSS equivalent. In an audit, ask the team to concretely demonstrate why CSS fails, with an example of an attempt.
How do you make a button <input type="image"> displaying styled text compliant?
Replace it with a <button> with text content styled in CSS. The <button> is natively accessible, its text is in the DOM, and its behavior is identical. The migration is also an opportunity to improve compliance on criteria 11.x related to forms.