For a quick overview of accessibility with images, view W3C's Images Tutorial.
Do Not Use Images of Text
- Mobile users struggle with images of text: the lines cannot reflow, so the browser just makes it smaller.
- Users with low vision struggle with images of text: JPG and PNG images of text cannot be scaled up by users with low vision without becoming blurry.
- Screen reader users struggle with images of text: all text in the image must be placed in the alternative text (alt text), in which all the text is read as a single run-on sentence: line breaks, headings, table structure, and lists are lost, and if any words are missed the user cannot go back a line—they have to start over at the beginning.
Best Practices
- Use "real" text as page content.
- When images of text are absolutely necessary (e.g., logos):
- Always provide alternative text for words in a picture meant to be read.
- If the text in the image is longer than a sentence, also reproduce its contents on the page as regular text: e.g., describe key points from a chart in its caption, or provide the event information from a poster designed for print next to the image of the poster.