1.4.5 Images of Text

Introduction

This document provides information about the Acquia Web Governance accessibility check:

• Do the images contain text?

What

In the HTML markup, text must be presented as actual text instead of text embedded within an image. This ensures that the text can be resized, read by screen readers, and adapted to different user needs. Except for a few cases where it is essential to embed text within an image for branding or design purposes, actual text improves accessibility and usability.

Why

Images of text can create significant barriers for accessibility because:

• Screen readers cannot interpret text inside images unless a text alternative (alt attribute) is provided.
• Users cannot adjust text size, font, or contrast when it is embedded in an image.
• Text in images may appear blurry or pixelated when users zoom in on it.
• Language translation tools cannot translate text in images.

Ensure that text:

• Is real

• Can be selected

• Can be adjusted for scale

Examples

This section provides some pass and fail examples of this success criteria.

Pass examples

1. Use HTML text instead of an image for headings:

   copy

   <h1>Welcome to Our Website</h1>

   • Why this works: The text can be selected, read by screen readers, and resized easily.

2. Use CSS to style text instead of embedding the text in an image:

   copy

   <p style="font-family: Arial, sans-serif; font-size: 20px; font-weight: bold;"> 
     Special Offer: 50% Off! 
   </p> 

   • Why this works: The text is real text and not an image. Therefore, it is more accessible.

3. Provide a text alternative when text in an image is necessary, such as for branding purposes:

   copy

   <img src="company-logo.png" alt="CompanyName logo">

   • Why this works: The logo is an essential image, and the alt text provides an accessible description.

Fail examples

1. An image with a text banner instead of real text:

   copy

   <img src="welcome-banner.png" alt="Welcome to Our Website">

   • Issue: The text is embedded in an image, which makes it inaccessible for screen readers and difficult to resize.
   • Fix: Use real text with CSS styling.

2. An image for a call-to-action button instead of an actual button element:

   copy

   <img src="signup-now.png" alt="Sign Up Now">

   • Issue: Users who rely on assistive technology may not recognize this as an interactive element.

   • Fix: Use an actual button element with text:

     copy

     <button>Sign Up Now</button>

How

This section provides information about how to identify and fix the issue.

How to identify it

The Acquia Web Governance platform highlights elements that contain text with insufficient contrast levels, including standard text on the website as well as link text in various states.

1. Identify all images on the page.
   • Look for images that contain text-based content, and are not decorative or photographic elements.
2. Determine if the text in the image is essential with the following questions:
   • Is the text part of a logo or branding? ✅ (Allowed Exception).
   • Can the text be presented in real text format instead? ✅ (Preferred Approach).
3. Check for an appropriate text alternative. If the image must contain text, does it have an alt attribute that accurately conveys the same information?
4. Use browser tools to inspect text accessibility with the following methods:
   • Try to select the text in the image. If you cannot, it is likely inaccessible.
   • Zoom in on the page and check if the text remains clear and readable.

How to fix it

• Use real text instead of images whenever possible.

  copy

  <h2 style="color: #ff5733;">Limited Time Offer: 30% Off!</h2>

  Why this works: The text remains accessible and can be resized or read by screen readers.

• Use CSS and SVG to create styled text.

  copy

  .text-banner {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    color: white;
    padding: 10px;
  }
  <p class="text-banner">Exclusive Sale – Limited Time Only!</p>

  Why this works: The gradient effect is achieved with CSS, while the text remains selectable and accessible.

• If an image of text is necessary, provide an accurate alt text.

  copy

  <img src="event-promo.png" alt="Event Promo: Tech Conference 2025, Register Now!">

  Why this works: The alt text conveys the same message as the image.

  Additional resources

  WCAG success criteria

  1.4.5 Images of Text

Do the images contain text?