Real text versus text in images under the ADA

Real text beats a picture of text

If the same visual result can be achieved with real text, use real text instead of an image of text. There are two exceptions. An image of text is fine if the user can customize it to their needs (font, size, color, background), or if that particular presentation is essential, as with a logotype.

A picture of words cannot be resized cleanly, recolored for high contrast, reflowed on a narrow screen, translated, searched, or read aloud with the same reliability as text. Alt text can pass the words to a screen reader, but it does nothing for the person who needs larger letters or different colors.

Notices, hours and menus saved as images

Public sites are full of images that were exported from a design tool or a word processor because it was the fastest way to publish: a closure notice, opening hours, a fee table, a flyer with a registration deadline. A resident who zooms in sees blurry pixels, and a visitor using a custom color scheme sees black text on a transparent background.

Scanned notices are a related case. If a scanned page is the only copy of a notice that residents need, the text in it is effectively locked inside the picture. See documents and PDFs for how this applies to files.

Closure notices and opening hours

The alt text below holds the words, but the visitor cannot enlarge, recolor or reflow them, and a long block of alt text is a poor reading experience. Real markup keeps the structure.

<img src="library-hours.png"
     alt="Main Library: Mon-Fri 9 to 8, Sat 10 to 5, Sun closed. Holiday closures apply.">

<h2>Main Library hours</h2>
<ul class="hours">
  <li>Monday to Friday: 9 a.m. to 8 p.m.</li>
  <li>Saturday: 10 a.m. to 5 p.m.</li>
  <li>Sunday: closed</li>
</ul>
<p>Holiday closures apply.</p>

Navigation labels made of images

Menu items that are images lock the label to one size and color, and they will not follow the visitor's text settings.

<a href="/permits"><img src="nav-permits.png" alt="Permits"></a>
<a href="/licenses"><img src="nav-licenses.png" alt="Licenses"></a>

<a class="nav-link" href="/permits">Permits</a>
<a class="nav-link" href="/licenses">Licenses</a>

Hiding real text behind a background image

A common shortcut hides the text and shows an image of it. That is still an image of text, and it stops working as soon as images are off or colors are overridden. Style the real text instead.

h2.permit-title {
  background: url("permit-title.png") no-repeat;
  height: 60px;
  text-indent: -9999px;
}

h2.permit-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  letter-spacing: 0.01em;
}

Where the exceptions apply

Logos and brand names are exempt, and so are images where the exact appearance is essential, for example a typeface sample or a scanned historical letter. Give them a short text alternative with the name, for example alt="City of Riverton" rather than alt="seal". A photograph of a street sign inside a larger picture is also fine, because it is part of an image with significant other visual content.

Images of text in apps

The same applies to app screens. A promo banner exported as one bitmap fails to scale with the system text size.

// SwiftUI
Image("registration-banner")
    .accessibilityLabel("Summer registration opens June 1")

// SwiftUI
VStack(alignment: .leading) {
    Text("Summer registration").font(.title2).bold()
    Text("Opens June 1")
}

// Jetpack Compose
Image(painterResource(R.drawable.registration_banner),
      contentDescription = "Summer registration opens June 1")

// Jetpack Compose
Column {
    Text("Summer registration", style = MaterialTheme.typography.titleLarge)
    Text("Opens June 1")
}

Verifying the fix

1. Scan the page for pictures that contain words. Zoom to 300 percent and see which letters turn blurry; real text stays sharp.
2. Try to select and copy the text with the mouse. If you cannot, it is probably an image.
3. Turn off images, or apply a high-contrast theme, and check that all information is still present.
4. Check decoration. A background image with a word on it only matters if the word carries information.

Common mistakes and a ship-it list

• Pasting long alt text to compensate for a text image.
• Using a stylized font as a reason; web fonts deliver the same look as real text.
• Leaving the original artwork as the only source, so a text edit means a new picture.
• Treating "this logo is fine" as permission for every banner.

Ship it when:

• Headings, menus, buttons and notices are real text.
• Images of text exist only for logos or essential presentations.
• Any image of text that remains has a text alternative that matches it.
• Page content survives zoom, custom colors and images turned off.

Sources

• Understanding SC 1.4.5: Images of Text (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.