Open a photo
Photographic visual for Images Of Text
GuideImages Of Text

Guide

Images of text: when the alt text is the words

Some pictures are not pictures of anything. A circular photographed on a desk, a quote on a coloured card, a screenshot of a message: what they carry is words, and the alt text that does their job is those words.

The words are the description

The W3C decision tree asks early whether an image contains text, because the answer changes the job. A photograph of a beach is described; a photograph of a notice is read. Describing the notice — “a white page with black printed text and a stamp” — tells a listener exactly what they are missing and nothing of what it says.

So the alt text of an image of text is its text: the words of the quote, the heading and key line of the notice, the message in the screenshot. Typography, background and colour are left out unless they mean something.

Short, long and essential

Short text

A button with words on it, a sign, a quote card, a single message: put the words in the alt attribute, as written. Up to about 250 characters this is the whole answer.

Long text

A circular, a page of a form, a long chat: the alt says what the picture is — “A circular from the school about the October holiday, in Hindi” — and the text itself goes on the page, as real text, where it can be read, searched and translated.

When the picture is the point

A logo, or a screenshot that shows what an error message looked like, is an image of text on purpose. WCAG 1.4.5 allows these. The alt still gives the words, and for a screenshot, enough of the context to know why it is there.

Reading the text out of the picture

Retyping a notice is slow, and that is what OCR is for. The text reader on this site runs Tesseract in your browser and reads printed English and Hindi; the screenshot reader enlarges small screen type first and can lay a chat out as Them and You lines. Each word comes back with a confidence, and the uncertain ones are outlined so you know where to look. It does not read handwriting, and nothing it produces should be published unchecked.

Questions people ask

What should the alt text of a quote card be?

The quote, and who said it if the card says so. The colours, the font and the background photograph are decoration unless they carry meaning. “Quote card” or “Inspirational quote” tells the listener only that they are missing something.

What if the text is too long for an alt attribute?

Past about 250 characters, give the picture a one-line alt that says what it is (“A notice from the district office about ration card renewal”) and put the full text on the page beside it, or in a long description linked to it. A screen reader cannot pause or skim an alt attribute, so a page-long one is hard to use.

What does WCAG 1.4.5 say?

Success criterion 1.4.5, Images of Text (Level AA), says that if the same visual presentation can be made with real text, real text should be used, except where the particular presentation is essential (a logo, for example). Real text can be resized, recoloured, translated and searched; text baked into a picture cannot.

Can I use OCR to write the alt text?

As a draft, yes — that is what the text reader on this site is for. Printed English and Hindi are usually read closely; small type, angles and decorative fonts cause errors, and handwriting is not read at all. Check every word against the picture before you publish it.

Where to take this next

The other written pages