Alt Text - Writing Effective Alt Text
Last updated by emily.pruden 5 months ago Please keep in mind the following principles when writing alt text:
Principles for Writing Alt Text
1. Understand the Context
Remember that many images convey information based on their context or use—logos are a good example of this. Alt text should describe the image, but it is more important to describe the information conveyed by the image; not just the image itself.
2. Convey the Same Information
Alt text is meant to give blind or low-vision users a similar experience to sighted users. It should convey the information that the image conveys to sighted users, so context is really important! There are often several appropriate alt texts for an image.
3. Appropriate Length - Not Too Long, Not Too Short
Another important facet of alt text is a balance between succinctness and descriptiveness. The alt text takes away from a screen reader user’s experience if it is too long and detailed, but they won’t get the information the picture conveys if it is too short. A good trick to help in using alt text that strikes this balance and conveys meaning is to close your eyes and think of the alt text you have. If you have a reasonably accurate vision of the image and what it tells you, you are on the right track!
While it is okay to have longer alt text occasionally, if you find yourself writing very long alt text frequently, it is likely that most of the information is conveyed somewhere else in the document. Along with this concept, images of a lot of text should be avoided as much as possible. If it is necessary, try to put the text from the image into the alt text, but again, if it becomes too lengthy, it probably shouldn’t just be conveyed with an image.
4. Use Punctuation
While alt text does not have to be a full sentence every time, it should always end with punctuation. Lack of punctuation causes a screen reader to keep reading as if the text that follows the image is part of the same sentence, which can be both confusing and frustrating for screen reader users. Ending alt text with punctuation causes a screen reader to pause, which helps users know they are no longer within the alt text and are now in a new sentence.
5. Beginning With “Image of…”
Alt text should not begin with an identifier such as “Image of…” or “Picture of…” as a screen reader would already identify the image as an image. In some cases, it is acceptable to identify an image as “Graph of…” or “Comic of…” if you believe the identification to be important to the user’s understanding of the image.
6. Decorative Images
It is also important to know whether an image is informative or decorative. Decorative images, like embellishments or fancy lines, can use an empty alt attribute (alt=””), or can be omitted entirely if they do not add anything of value to the document. The screen reader skips over decorative images, instead of taking away from the user’s experience by reading a detailed description that is irrelevant to the text. Informative images add to the text by illustrating a point made, showing a painting referenced within the text, or depicting a relevant person. Think about whether you would be missing information if the image was gone, or if the meaning of the document would be lost or altered without it. If this is the case, alt text should be added.
Example:
Ineffective Alt Text:
"A Golden Bird" or "Picture of a gold bird"
Effective Alt Text:
"The golden bird from the Dove logo"
Additional Examples
Pictures of Text
Sometimes an image is simply a picture of text, with no other meaning - in those cases you can simply write the text from the image into the alt text so it will be accessible:
Additional References
Utah State Alt Text Basics
Some resources from Utah State on alt text helps.
Some resources from Utah State on alt text helps.
Five Golden Rules of Alt Text
This article highlights the main principles that should be used in writing alt text, and gives several good examples.
This article highlights the main principles that should be used in writing alt text, and gives several good examples.
Alt Text From the Perspective of a Visually Impaired User
This article is a good resource to put alt text into perspective, and to see how effective alt text helps the visually impaired. It also explains how ineffective alt text takes away from their experience.
This article is a good resource to put alt text into perspective, and to see how effective alt text helps the visually impaired. It also explains how ineffective alt text takes away from their experience.
WebAIM Alt Text Techniques
This article is a good introduction to the more technical aspects of alt text, and gives the basics of creating helpful and effective alt text.
This article is a good introduction to the more technical aspects of alt text, and gives the basics of creating helpful and effective alt text.
W3 Alt Text Tips and Tricks
This article is a general overview of some things to avoid or to include within alt text.
This article is a general overview of some things to avoid or to include within alt text.
W3 Alt Text Decision Tree
If you aren’t sure if an image needs alt text, this is a good resource to help you decide. It’s a great resource to help you learn how to decide what kind of alt text an image needs.
If you aren’t sure if an image needs alt text, this is a good resource to help you decide. It’s a great resource to help you learn how to decide what kind of alt text an image needs.
Alt Text Best Practices
This article gives some good examples of the principles we try to follow with alt text regarding decorative images, text in images, and the context of images.
This article gives some good examples of the principles we try to follow with alt text regarding decorative images, text in images, and the context of images.
Guide to Using Alt-Text to Make Images More Accessible
This article is another overview of alt text with an explanation about not using special characters.
This article is another overview of alt text with an explanation about not using special characters.
