WCAG 1.4.9: Images of Text (No Exception)

Introduction

WCAG 2.1 Success Criterion 1.4.9, titled "Images of Text (No Exception)", is a Level AAA guideline that mandates all text conveying information on a web page must be presented as actual text rather than as images. This criterion builds upon the Level AA Success Criterion WCAG 1.4.5 (Images of Text) by removing its exceptions for essential text and customizable presentation.

In essence, if the primary purpose of a visual element is to convey text-based information, it must be rendered as live, selectable text. This means avoiding the use of raster images (like PNG, JPG, GIF) or even vector images (like SVG) where the text content is not embedded as actual text elements (e.g., using <text> tags within SVG), but rather as flattened graphics.

Why This Criterion Matters

Adhering to SC 1.4.9 significantly enhances accessibility and usability for a diverse range of users. Presenting information as real text offers numerous advantages:

• For Users with Low Vision: Text can be easily resized, reflowed, and magnified without loss of clarity or pixelation. Images of text, when zoomed in, often become blurry and difficult to read. Users can also customize text properties like font, color, and spacing via browser settings or custom stylesheets, which is impossible with images.
• For Users with Cognitive Disabilities: The ability to choose specific fonts, line spacing, or background colors can greatly improve readability and comprehension. Images of text strip users of this crucial customization.
• For Users of Assistive Technologies: Screen readers can directly access, read, and interpret actual text. While alt text can provide a fallback for images, it doesn't offer the same level of interaction (e.g., selecting, copying, translating) as live text.
• For Mobile Users: Live text automatically reflows and adapts to various screen sizes and orientations, ensuring optimal readability on mobile devices. Images of text can lead to horizontal scrolling or tiny, unreadable content.
• For Customization and Personalization: All users can benefit from the ability to apply their preferred styles, dark modes, or high-contrast themes. Real text responds dynamically to these preferences.
• For Performance and SEO: Text loads faster than images, contributing to better page performance. Search engines can crawl and index live text, improving discoverability and search engine optimization.

Success Criterion 1.4.9 Requirements

The success criterion states:

Images of Text (No Exception): Text is used to convey information rather than images of text with no exceptions.

The key differentiator here is "no exceptions." Unlike SC WCAG 1.4.5, which permits images of text when the text is essential to the information conveyed (e.g., a logo where the specific styling is crucial) or can be visually customized by the user, SC 1.4.9 removes these allowances. If text is conveying information, it must be presented as text. This implies a very strict interpretation for Level AAA compliance.

This criterion does not apply to text that is part of a picture that contains significant other visual content (e.g., text on a street sign within a photograph of a street). However, if the entire purpose of an image is to display text, then it falls under this criterion.

Practical Guidelines for Compliance

To ensure compliance with SC 1.4.9, consider the following practical guidelines:

1. Prioritize Real Text: Always use standard HTML elements (<h1>-<h6>, <p>, <a>, <span>, etc.) for all text content.
2. Utilize Web Fonts: For unique or branded typography, use CSS @font-face to embed custom fonts. This allows the text to remain live while achieving desired visual styles.
3. Leverage CSS for Visual Effects: Instead of creating images for styled text (e.g., text with shadows, gradients, specific textures), use CSS properties (text-shadow, background-clip: text, CSS gradients, SVG filters) to achieve these effects on actual text.
4. Embed Text in SVGs: If you use SVG for graphics that include text, ensure the text is embedded using SVG's <text> elements rather than flattening it into paths. This keeps the text accessible and selectable within the vector graphic.
5. Avoid Image-Based Buttons or Navigation: Labels for buttons, navigation links, and other interactive elements should always be live text.
6. Audit Existing Content: Regularly check your website for any instances where text might be presented as an image and replace it with live text.

Examples

Incorrect Implementations

These examples demonstrate common scenarios where text is rendered as an image, failing WCAG 1.4.9.

<img src="heading-welcome.png" alt="Welcome to Our Website">
Copy text

<button><img src="button-signup.png" alt="Sign Up Now"></button>
Copy text

<svg width="200" height="50">
  <image href="logo-text.png" x="0" y="0" width="200" height="50" />
</svg>
Copy text

Correct Implementations

These examples demonstrate how to achieve similar visual results while adhering to WCAG 1.4.9 by using live text and CSS.

<h1 class="main-heading">Welcome to Our Website</h1>
Copy text

@font-face {
  font-family: 'StylishFont';
  src: url('path/to/stylishfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.main-heading {
  font-family: 'StylishFont', sans-serif;
  font-size: 3em;
  color: #0056b3;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  /* Other CSS for visual effects */
}
Copy text

<button class="styled-button">Sign Up Now</button>
Copy text

.styled-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.styled-button:hover {
  background-color: #0056b3;
}
Copy text

<svg width="200" height="50" aria-labelledby="svg-title">
  <title id="svg-title">Company Logo</title>
  <rect x="0" y="0" width="200" height="50" fill="#f0f0f0" />
  <text x="10" y="35" font-family="'StylishFont', sans-serif" font-size="24" fill="#333">My Company</text>
</svg>
Copy text

Best Practices and Common Pitfalls

Best Practices

• Design with Accessibility in Mind: From the outset of a design project, prioritize using real text for all informational content.
• Educate Content Creators: Ensure anyone publishing content understands the importance of using actual text.
• Use Semantic HTML: Employ appropriate HTML tags for headings, paragraphs, lists, and other content structures.
• Test Thoroughly: Use browser developer tools to inspect elements and confirm they are text. Test with browser zoom, custom stylesheets, and screen readers to verify accessibility.

Common Pitfalls

• Over-Reliance on Graphic Design Tools: Tools that output flattened images for text elements without considering web accessibility.
• Legacy Content: Older websites or content migrated from other formats often contain images of text that need to be updated.
• Misunderstanding "No Exception": Failing to grasp that SC 1.4.9 is stricter than WCAG 1.4.5 and disallows images of text even for what might be considered "essential" if that text could be rendered as actual text.
• Ignoring Dynamic Content: If content is generated dynamically (e.g., charts, graphs, data visualizations), ensure any text within these visuals is rendered as actual text (e.g., using SVG text elements for charts).

Related WCAG Guidelines

• WCAG 1.4.5 Images of Text (Level AA): This is the less strict version of the criterion, allowing exceptions for essential text or text that can be visually customized. SC 1.4.9 eliminates these exceptions.
• WCAG 1.4.4 Resize Text (Level AA): Emphasizes the ability for users to resize text up to 200% without loss of content or functionality, which is directly supported by using real text.
• WCAG 1.3.1 Info and Relationships (Level A): Relates to providing information, structure, and relationships programmatically, which is easier to achieve with live text and semantic HTML.