Warning! Editing this pageset section will affect all pages on your website.

Images and Accessibility

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.