Alternative Text

What is Alternative Text?

Alternative text (also known as alt text) is the text equivalent of an image in context. All images must have alt text. It is essential for screen reader users to access that image content. Also, if the image is unavailable, web browsers will display the text in place of the missing image. Most web editors like WordPress and Drupal provide an easy way to add alternative text.

Alt Text Tips

Finding the best alt text for an image is more of an art than a science. The same image may have different alt text depending on the context in which it is used. The following tips should help you get started.

Do:

• Be accurate and concise
  • Describe the core purpose of the image. Why is it there and what relevant information does the user need to get from it.
• Keep it to less than 140 characters when possible

Do NOT:

• Be redundant
  • If the image is already described elsewhere on the page then it doesn’t need to be repeated in the alt text. Just give a brief description and directions on where the longer description is.
• Include words like “image” in your alt text
  • Screen readers will alert users that it’s a “graphic” or an “image.” Having those type words in your alt text is redundant.

Questions to ask when writing alternative text:

• What is the purpose of the image?​
• What is the educational value of the image?​
• Is there relevant text in the image?​

Avoid Images of Text

• Where possible it is best to keep it text instead of having an image of text.
  • Images of text may become pixelated when zooming in. They also prevent users from copying or searching through the text.
• Text in an image must be duplicated within the alt text which may complicate the alt text
• Logos are an exception to “no text within an image”

Decorative Images

Decorative images are images that are not intended to give more meaning or add content to a website, document, etc. You should use these sparingly.

Applications like Microsoft Word have an option of marking the image as decorative instead of giving written alt text. When working with HTML you will want to still add the alt text attribute, but keep it empty. In many WordPress environments, leaving the Alt Text field empty will give the image an empty alt tag marking it as decorative. We still advise double checking this result.

Complex Images

Complex images are things like infographics, charts, graphs, etc. These images are often so complex that attempting to fully describe them in the alt text will be a challenge. Providing a longer description of these images elsewhere on the webpage or document is advised. You can use alt text to briefly describe the image and then direct the user to the longer description. Example: “The planets in our solar system. Longer description in following paragraphs.”

W3’s Web Accessibility Tutorials: Complex Images

HTML Examples

<img alt="Rameses, a real ram with blue painted horns,
stands in the Pit with students.">

<img alt="">