Alternative image descriptions (Alt tag)

"Alt tag" or "Alt text" is a common shorthand term used to refer to the attribute within in the <img> image tag. It provides a clear text alternative of the image for screen reader users. It is also good for search engine optimization (SEO).

Alt text should describe what is in the photo so that screen readers and search engines can describe what the photo represents.

Image
Cat wearing a cone on its head after surgery

Good Alt text for this image would be:

Cat with cone on its head after surgery

How to add Alt text to an image

To add alternative text in a content management system like Drupal or WordPress there is usually a dialog box with an Alternative text field that looks similar to the following:

WordPress example:

Image
Wordpress example of adding alt text

Legacy Drupal sites example:

Image
Generic image properties dialog box

 

Newer Drupal site example:

Image
Example of adding alt text in Drupal 8

Simple alt text tips:

  • Explain why the image is important to you in its context. 
  • Never start with "Photo of" or "Image of". That is already announced to the screen reader.
  • If the alt text is very long, you can add a period. On some screen readers, it will pause or take a breath, which will make it easier to comprehend.
  • Images that are purely decorative do not need alt text, but the alt attribute must still be available to tell the screen reader software that it is intentionally blank.
  • When in doubt add alt text.

Alt text tips for complex graphics

Information about complex alt text for graphics can be found in these articles: