The element uses an image of text instead of real text.

Link to The element uses an image of text instead of real text. copied to clipboard

Rule ID:: image-of-text
User Impact:: Serious
WCAG :: 1.4.5.a

Rule

An image MUST NOT include informative text if an equivalent visual presentation of the text can be rendered using real text, unless the text is essential (such as a logo), or the font, size, color, and background are customizable.

Background

When an image of text is used instead of real text styled with CSS, people with low vision and other visual disabilities are not able to modify or zoom the text to meet their needs. In order to be modifiable by users, text content has to be real text instead of embedded in an image. This allows people with low vision and other visual disabilities to zoom or modify the visual presentation of text to meet their needs using browser zoom, a custom CSS stylesheet, high contrast mode, browser plugins, or other assistive technologies.

In contrast, when text embedded in an image is enlarged by screen magnifiers, the font is still readable, perhaps, but it is not as easy to read as real text. People with low vision may find it too hard to read.

Code Examples

Good Example:

Text in a navigation bar styled using CSS:

<div style="background: #aa061a;
  color: white;
  width: 314px;
  max-height: 101px;
  overflow: hidden;
  text-align: center;
  font-weight: bold;
  padding: 39px 0;
  margin: auto;
  font-size: 50px;
  text-shadow: 5px 5px 5px #620915;">PERSONAL</div>

Text in an SVG image (can still be custom styled and zooms well):

<svg width="150" height="150" role="img">
  <rect width="150" height="150" fill="#0000FF" stroke="#000" stroke-width="1" />
  <text id="text" x="75" y="85" font-size="1em" text-anchor="middle" fill="#FFFFFF">Real text here</text>
</svg>

Failure Example:

Text in an image (people who use custom styles or screen magnifiers will have difficulty reading the image):

<img src="personal.png" width="165" height="59" alt="Personal">

How To Fix

To fix this issue:

Use HTML text and style text and background with CSS to achieve the desired appearance.

Don't do this:

Use an image of styled text and background, unless it is a logo or the text is otherwise essential in the image.