image-of-text

Text should be real text, not an image of text

Asks about images that markup shows are likely to hold text (an <input type="image">, or an <img> showing an SVG with <text>), whether that text could be real text.

Applies to. Applies to two kinds of image that markup shows are likely to hold text, when they are rendered:

• an <input type="image">, a button drawn as an image, which nearly always carries its label as text in the image;
• an <img> whose source is an SVG data URL whose markup holds a <text> element: the text is drawn as part of the image, which can't be restyled as text can.

Other images are not asked about: whether an image holds text is in its pixels, which a scan of the markup doesn't see. An inline <svg> with <text> is real text, and is out of scope (ACT 0va7u6). Finding nothing to ask about, it reports notApplicable, not pass: it applies only to what its check flags, and finding nothing there doesn't show that all is well.

Expectation. Text that can be real text is real text, styled with CSS, rather than an image of text, unless the image can be customized to the user's needs or the particular presentation of the text is essential, as in a logo (WCAG 1.4.5).

Examples

<input type="image" src="send-button.png" alt="Send">

<img alt="WCAG Rocks" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text x='0' y='15'>WCAG Rocks</text></svg>">

<svg xmlns="http://www.w3.org/2000/svg"><text x="0" y="15">WCAG Rocks</text></svg>

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

View source