What is alt text and why is it important?

"Alt Text" is short for "alternative text" and is sometimes referred to as an "alt tag." It is a short text description of an image that is used when the image itself cannot be viewed. Think of it as how you would describe a photo to someone over the phone without them being able to see it.

Adding alt text makes images accessible to users with visual impairments, low sight, dyslexia and other disabilities. When a screen reader comes across an image, it reads the alt text aloud. Users with sight-related disabilities rely on these descriptions to understand the meaning and context of all images on a webpage.

Alt text will also display when you hover your mouse over an image or when an image will not load for whatever reason (slow wifi, poor internet access, etc.)

Alt text is the responsibility of web maintainers for each website. It should be no longer than 100 characters (including spaces and punctuation) and must include all text on an image. Avoid images with too much text including infographics, posters, flyers, etc. Search engines, like Google, scan alt text so having good alt text is a way to better your search engine results.

How to check your Alt Text

You can check your character length by pasting the text into Microsoft Word and selecting Review and Word Count. The pop-up listing will include "characters with spaces" this is the number you need at 100 or less.

How to write good alt text

The alt text within the image component should typically:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate. Current guidelines suggest 100 characters or less (including spaces between words and punctuation) but some screen readers will read to about 140 characters.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases "image of, picture of or graphic of ..." to describe the image. It is usually apparent to the user that it is an image. 
  • Use the subject's name and do not identify a person by their race, ethnicity or gender in the text but rather as a "person" or "student." Describe only what you see and you what know to be true about the photo.

Using correct grammar can enhance the experience for screen reader users:

  • Capitalize the first letter
  • End the alt text with a period. This tells a screen reader that it has reached the end, to pause and stop reading.

Examples

Please click on the plus signs below to expand sections with examples of different types of images and alt text.