Images and Alt Text

Alternative text (or alt text) describes the content and purpose of an image. Alt text is metadata added to an image that does not appear visually but is announced by screen readers.

Impact

Blind or visually impaired individuals using screen readers or electronic braille displays will use the alt text to understand the meaning of the image. Without alt text, they will not receive the same information as people without visual impairments. 

If images fail to load in a browser or if user settings block images, alt text may be displayed. If alt text is not available, the user will miss the purpose of the image.  

What to do

Add alt text that describes what the image means in the context that it is being used. Write clear and concise alt text. The length should typically be a few words but can be a couple of short sentences.

Some images, such as graphs, charts, and diagrams, are too complex to be described using alt text alone. The meaning of these images needs to be presented in an alternative format, such as a table or longer text description below the image or in a separate document that is linked below the image.  

If the image is used as a link or button, the priority becomes describing the purpose of the image and not the content. In the case of a linked image, the alt text would be a description of the link and not of the image itself.  

Avoid redundancy: If a linked image is next to a text link that goes to the same place, mark the image as descriptive or include empty alt text so that the link is not read twice.

If the image is used for style or decoration and does not have any meaning, it needs to be indicated as decorative so that screen readers ignore it. Some website editors will allow you to check a box indicating an image is decorative. If yours does not, add an empty space as the alt text for the image. Screen readers will interpret this as empty alt text and ignore it.

In the example below, consider how the alt text is different depending on where the picture is being used. 

An Ohio State fan wearing a buckeye nut hat cheers on the Best Damn Band in the Land as they perform "Script Ohio" in Ohio Stadium
  • Alt Text Example 1: The image is used on the BIG10 website showing football fans in various stadiums.
    • Alt text: Thousands of Ohio State football fans attend a game at Ohio Stadium.
  • Alt Text Example 2: The image is used on Ohio State’s marching band website.
    • Alt text: A crowded football stadium showing fans cheering with the Ohio marching band as they perform “Script Ohio” on the field at a homecoming game.
  • Alt Text Example 3: The image is linked, and clicking it goes to the “Ohio State Buckeye Fans” Facebook group.
    • Alt text: Visit the "Ohio State Buckeye Fans" Facebook group.

Things to avoid

  • Don’t include “Image of” or “Picture of” in the alt text as most screen readers will automatically identify the object as an image.
  • Don’t use the file name as the alt text.
  • Don’t simply describe the image. Describe the meaning and purpose of the image in the context that it is being used.
  • Don’t create alt text that is longer than 125 characters. Include long descriptions below the image or on a separate page that you link to. 

Resources

Check out these great resources to learn how to write effective alt text: