The majority of images within websites can be classified into one of the following image types:

Informative images are your 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 it could be 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 name of the person.

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

Decorative images are pictures that are added to content as a way of accenting the appearance of the page. Decorative images 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.

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

The image below is used on our DubBot home page and provides no additional content for the page, it is simply an aesthetic complement to the page.
​

Note: many organizations require that alt text still be added for decorative images because deciding whether an image is decorative or not can sometimes be subjective. Also, automated testers often flag images on the page for having blank alt text even if it is marked only for presentation. This could open up the webpage for additional scrutiny. Many organizations find it easier to have a policy that just requires all images to have alt text.

Functional images are images that are used to initiate an action within a webpage. This includes images that serve as links and buttons within forms. 

If the image is the only thing linked in the content, the alt text of the image should be information about where the link is directing the web visitor.

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. A common example is the magnifying glass image for search fields in lieu of the submit button. With the magnifying glass example, appropriate alt text would not be describing the image as a magnifying glass but rather as the "search submit button". 

This is probably the easiest case to determine. Images of text are what they sound like. If an image has text embedded within it, the alt text for the image should be the text that is embedded within the image.

Images of text can be a picture of a flyer being used to promote an event. It is important to make sure that the details that are within the flyer are included in the alt text. If some of the details are included in the page, that content does not necessarily need to be duplicated in the alt text. It is important to ensure that all content conveyed in the flyer is somewhere within the page's content or within the alt text. For example: a visitor should not have to be able to see the image to know deadlines, locations, or RSVP contact details.

Example

Complex images are images that have data or a large amount of details included within them. This may be images of graphs or charts. In these cases, the recommended length of alt text is not sufficient for conveying all of the information in the image. 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 web page or on another webpage. If the full explanation is included on another web page, there needs to be an association made between the image and the link to the other web page.

More information on creating and associating alt text for complex images can be found on the w3.org website.