1.4.5 Images of 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 embedding text within an image is essential 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 some methods on how to review and fix the issue.

How to review it¶

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