WCAG 1.4.5: Images of Text

Introduction to WCAG 1.4.5 Images of Text

WCAG Success Criterion 1.4.5, "Images of Text," at Level AA, mandates that if a visual presentation can be achieved using standard web technologies, then actual text should be used to convey information instead of images containing text. This criterion is fundamental to ensuring flexibility and accessibility, allowing users to customize their browsing experience without encountering barriers posed by static, unadaptable image-based text.

Why WCAG 1.4.5 Matters

Using real text rather than images of text significantly enhances web accessibility and usability for a wide range of users and scenarios:

Enhanced Readability and Customization

Real text allows users to adjust its visual presentation to suit their individual needs. This includes:

• Text Resizing: Users can easily zoom in or increase font size without loss of clarity or pixelation, which often occurs with images of text.
• Font Customization: Users can change font families, colors, line spacing, and letter spacing to improve readability, especially beneficial for users with dyslexia or cognitive disabilities.
• High Contrast Modes: Operating systems and browser extensions can apply custom color schemes, including high contrast modes, to real text. Images of text, however, typically retain their original colors, potentially becoming unreadable.

Accessibility for Diverse Users

Various user groups benefit directly from real text:

• Low Vision Users: Rely on text resizing, reflow, and custom stylesheets to perceive content effectively. Images of text can become blurry or pixelated when magnified, or may not reflow correctly.
• Cognitive and Learning Disabilities: Users may require specific fonts, increased line spacing, or simplified text presentations to comprehend content. Real text supports these customizations.
• Screen Reader Users: Assistive technologies like screen readers rely on underlying text to announce content. While images can have alt text, it’s a fallback and not as robust or flexible as genuine text content.
• Users with Slow Internet Connections: Text files are significantly smaller than image files, leading to faster page load times and reduced data usage.
• Search Engine Optimization (SEO): Search engines can read and index real text directly, improving a website’s discoverability. Text embedded in images is not directly accessible to search engine crawlers, even with alt text.

Understanding Success Criterion 1.4.5: Images of Text (Level AA)

The success criterion explicitly states: "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text." (Level AA)

This means that for any content that can be rendered as text using standard web technologies (HTML and CSS), it must be presented as real text. The criterion acknowledges that there are specific situations where images of text are permitted:

• Incidental: Images of text that are purely decorative, or where the text is part of a larger photographic image that contains significant other visual content. For example, text on a street sign in a photograph of a city, text on a product in an image, or text embedded in a complex diagram where the text itself isn’t the primary informational focus and is redundantly provided elsewhere.
• Logotypes: Text that is part of a logo or brand name. This exception acknowledges that logos are often treated as graphic elements rather than pure text for branding and visual identity purposes.

Practical Guidelines for Compliance

Prioritize Real Text with CSS

The most straightforward way to comply is to always use HTML text elements (e.g., <h1>–<h6>, <p>, <span>, <a>, <button>) and style them using CSS. This ensures maximum flexibility and accessibility for all users.

Leverage Web Fonts

To maintain brand identity and achieve specific typographic styles without sacrificing accessibility, use @font-face to embed custom web fonts. This allows you to achieve unique visual aesthetics while keeping the text as actual, selectable, scalable, and accessible text.

Strategic Use of SVG

Scalable Vector Graphics (SVG) are excellent for icons and complex graphics. While SVG can embed text, if an SVG contains important text, that text should ideally be rendered as true text within the SVG (using <text> elements) or accompanied by accessible text alternatives. For simple icons, use SVG for the graphic and provide accompanying real text labels outside the SVG.

Examples of Correct and Incorrect Implementations

Correct Implementation: Real Text with CSS

<h1 class="main-heading">Welcome to Our Accessible Website</h1>
<button class="call-to-action">Explore Our Services</button>
<p class="important-info">This is important information about our new features.</p>

.main-heading {
  font-family: "Georgia", serif;
  font-size: 2.8em;
  color: #1a237e; /* Dark indigo */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.call-to-action {
  background-color: #4caf50; /* Green */
  color: white;
  padding: 12px 25px;
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.call-to-action:hover {
  background-color: #43a047;
}

.important-info {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
  color: #333;
  margin-top: 30px;
}

Incorrect Implementation: Images of Text

<img src="heading-welcome.png" alt="Welcome to Our Accessible Website">
<img src="button-explore.png" alt="Explore Our Services button">
<img src="info-new-features.png" alt="This is important information about our new features.">

/* No relevant CSS needed for text styling, as content is an image. */
/* The image will not scale well, cannot be customized by users, and is not direct text. */

Exception Example: Logotypes

<a href="/" aria-label="Company Name Home">
  <img src="company-logo.svg" alt="Company Name Logo" role="img">
</a>

.company-logo {
  max-width: 250px;
  height: auto;
}

Best Practices and Common Pitfalls

Best Practices

• Prioritize Semantic HTML and CSS: Always use appropriate HTML elements (<h1>–<h6>, <p>, <ul>, <ol>, etc.) for text content and apply styling with CSS. This is the foundation of accessible web design.
• Implement Web Fonts Strategically: Use @font-face to include custom fonts. Ensure that font files are optimized for web use to minimize load times.
• Ensure Sufficient Contrast: While not directly part of 1.4.5, ensuring text has adequate contrast (WCAG 1.4.3) is critical for readability, especially when users cannot customize text colors.
• Test Text Resizing: Regularly test your website’s responsiveness to text resizing, both through browser zoom and operating system/browser text size settings. Ensure text reflows gracefully without content overlap or clipping.
• Use SVG for Icons (Separate Text Labels): For graphical icons, use SVG. If an icon needs a text label, ensure the label is actual HTML text adjacent to or associated with the SVG, rather than embedded within it as an image of text.
• Provide Text Alternatives for Incidental Images: For images containing incidental text (e.g., text on a product in a photo), provide descriptive alt text that conveys the relevant information, if any.

Common Pitfalls

• Stylized Headings as Images: A common mistake is to create visually elaborate headings as images to achieve a specific font or effect. This completely disables text customization for users.
• Buttons with Embedded Text: Buttons where the text is part of the image (e.g., a PNG or JPG background with text baked in) are inaccessible. The button text must be real HTML text.
• Complex Data Visualizations: Charts, graphs, and infographics often contain text labels. If these labels are images of text, they fail the criterion. Ensure all critical textual information in data visualizations is rendered as real text or provided in an accessible, equivalent text format.
• Overlooking Language Support: Images of text cannot be easily translated by browser or assistive technology translation tools, creating barriers for multilingual users.
• Incorrectly Applying the "Incidental" Exception: Misinterpreting the "incidental" exception to justify using images for primary content text. The exception applies only when the text is not the main information being conveyed, or is purely decorative.

Related WCAG Guidelines

• 1.4.3 Contrast (Minimum): Ensures sufficient contrast between text and its background.
• 1.4.4 Resize text: Requires text to be resizable up to 200% without loss of content or functionality.
• 1.3.1 Info and Relationships: Focuses on ensuring information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
• 2.4.3 Focus Order: Ensures the tab order is logical, especially important for interactive elements like buttons that might contain images of text.