In order to make images and complex visual illustration accessible, you need to add a text alternative to the image that conveys the same information as the image itself. This text is called "alternative text" or "alt text".
Alt text is read by a screen reader or other assistive device. It communicates the purpose of the graphic, not its appearance. This allows screen reader users to benefit from the information being conveyed by the image, even if they cannot see it.
Accessible images are beneficial in many situations, such as:
- People using screen readers: The text alternative can be read aloud or rendered as Braille
- People using speech input software: Users can put the focus onto a button or linked image with a single voice command
- People browsing speech-enabled websites: The text alternative can be read aloud
- Mobile web users: Images can be turned off, especially for data-roaming
What and When to Write the Alt Tag
WebAIM's alt tag page shares many different image situations and how to alt tag each image.
W3.org created an alt tag decision tree .
HOW TO ADD ALTERNATIVE TEXT
The Attributes field will populate the Alt text field , which is the name of the image. For better accessibility, type a description of the image contents. To add the image as decorative, click the Decorative image checkbox . If the Decorative Image checkbox is selected, the alternative text field is grayed out.