Images of Text

Who this affects

Low-vision users cannot restyle an image of text — it pixelates on zoom and ignores their font, spacing, and colour preferences. Screen reader users depend entirely on the alt text.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<h1>Spring festival</h1>

<!-- FAILURE 1: the headline is a picture of text. Even with correct alt text
     - so 1.1.1 passes - it pixelates when enlarged, ignores the user's font,
     colour and spacing preferences, cannot be selected or searched, and cannot
     be translated. -->
<img src="../../assets/media/promo-heading.svg" width="420" height="70"
     alt="Three days of events, 12 to 14 April">

<!-- FAILURE 2: a "button" that is really an image. It cannot reflow, cannot
     grow with the user's text size, and its label is locked into the file. -->
<p><a href="#book"><img src="../../assets/media/promo-button.svg" width="200" height="52"
     alt="Book festival tickets"></a></p>

<!-- FAILURE 3: a paragraph of terms and conditions rendered as an image,
     usually because someone wanted a specific typeface. This is the worst
     case: a wall of unselectable, unsearchable, unzoomable text. -->
<img src="../../assets/media/promo-terms.svg" width="420" height="96"
     alt="Tickets are non-refundable. Members save 20%. Under 16s go free with a paying adult.">

<p id="book">Booking.</p>

<h1>Spring festival</h1>

<!-- FIX 1: real text styled with CSS. It stays sharp at any zoom, respects the
     user's font and spacing overrides, can be selected, searched, translated
     and read by a screen reader as text rather than as an alt attribute. -->
<p class="promo-heading">Three days of events, 12 to 14 April</p>

<!-- FIX 2: a real link styled as a button. It grows with the text, reflows,
     and its label is in the DOM. -->
<p><a class="button" href="#book">Book festival tickets</a></p>

<!-- FIX 3: terms as real text. -->
<p class="promo-terms">Tickets are non-refundable. Members save 20%.
   Under 16s go free with a paying adult.</p>

<!-- The exceptions, and they are narrow:
       - LOGOTYPES: a brand's wordmark is exempt. Your logo can stay an image.
       - ESSENTIAL presentation: a font specimen, a scanned manuscript, or a
         typographic artwork where the exact rendering IS the content.
       - Customisable images: at AA you may use an image of text if the user
         can adjust its font, size and colours. This exception is removed
         entirely at AAA by 1.4.9.

     "Our designer wanted a specific typeface" is not an exception - web fonts
     exist. Neither is "the CSS was hard". -->

<p id="book">Booking.</p>

How to test it

Look for headings, buttons, banners, quotes, and infographics rendered as images. Ask whether CSS could produce the same effect with real text.

• Automated

  Recognising that an image contains text requires OCR and human judgement about whether it is essential.

  No axe rule maps to this criterion. It has to be checked by a person.

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.4.9 Images of Text (No Exception) (Level AAA)
• 1.1.1 Non-text Content (Level A)
• 1.4.4 Resize Text (Level AA)

In the specification

• Understanding 1.4.5 Images of Text — the W3C explanation, intent and exceptions
• 1.4.5 in the WCAG 2.2 Recommendation — the normative wording