Possibly the most straightforward alt text, if an image contains text, the alt text should contain that text.

Example

Example

For an event flier: Ensure that all content conveyed in the flyer is somewhere within the page's content or the alt text. A visitor should not have to be able to see the image to know deadlines, locations, or RSVP contact details.

If an image is the only item inside of a link and the link does not contain any text, the image's alt text should describe the link's destination to the user.

If the image is being used as a button within a form, the alt text for the image should describe the form action that will take place.

Image as a Link Examples

Image as a Button Example

Decorative images are pictures added to content to accent the page's appearance. They do not add any additional content to the page.

Organizations may have different rules for applying alt text to decorative images. If your policy is to leave the alt text blank for decorative images, the alt attribute should still be added to the image but the text should be left blank and you can add the attribute role="presentation" for added clarity. Many organizations require that alt text still be added for decorative images, so check with your group's guidelines.

The image below is from a webpage and provides no additional content; it is simply an aesthetic complement to the page.
​

Note: There should be no spaces between the quotes in an empty alt tag.

Informative images are the run-of-the-mill images that you include in content as a way of conveying additional information through a picture. This could be a picture of the building where your office is on your Contact Us page or a headshot for your profile page.

These images should include alternative text that describes what you are trying to convey by including the picture in your content. For the building picture examples, appropriate alt text would be the name of the building and any other notable landmarks included only in the picture, not in the surrounding content. For the headshot picture, the appropriate alt text could be the person's name.

The image below is used on our Leadership Team page:
​

Complex images have data or a large amount of details included within them, such as images of graphs or charts. In these cases, more than the recommended length of alt text is often required to convey all of the image's information. In this case, the alt text may contain a short description of what the image is conveying. A supplementary long description may be included on the same webpage or on another webpage. If the full explanation is included on another webpage, there needs to be an association made between the image and the link to the other webpage. Complete details on alt text for complex images can be found in the Complex Images Tutorial from the Web Accessibility Initiative (WAI).