HTML5 – Techniques for providing useful text alternatives

A simple alt text decision tree

  • Is this image the only content of a link or form control?
    • Yes: Use the alt attribute communicate the destination of the link or action taken
    • No: Continue on!
  • Does this image contain text?
    • Yes:
      • If the text in the image is also present as real text nearby, use an empty alt attribute.
      • Otherwise, use the alt attribute to include the communicative text of the image (not text included for visual effect)
    • No: Continue on!
  • Does the image contribute meaning to the current page or context?
    • Yes, and it’s a simple graphic or photograph: the alt attribute should briefly describe the image in a way that conveys that meaning.
    • Yes, and it’s a graph or complex piece of information: include the information contained in the image elsewhere on the page.
    • Yes, but a suitable alt text is unknown at the time of publication (for example on a photo upload site): provide a caption for the image.
    • No: Continue on!.
  • Is the image purely decorative or not intended for the user?
    • Use an empty alt attribute.
  • Image use not listed above or unsure about what alt text to provide?
    • This decision tree does not cover all cases, for detailed information on the provision of text alternatives refer to the requirements and recommendations below.

Inline images

When images are used inline as part of the flow of text in a sentence, the text alternative must be a word or phrase that makes sense in the context of the sentence it is contained in.