Skip to main content
Image Types and Alternative Text

This article discusses the different types of images you might use on your webpages, and how and when to craft clear alternative text.

Updated over a week ago

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

  • Informative

  • Decorative

  • Functional

  • Images of Text

  • Complex Images

Informative images

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:

Blaine Herman headshot
Code for image
<img alt="Blaine Herman, a white man with brown hair, brown eyes and wearing a blue plaid shirt." src="_image/blaine.jpeg">

Decorative images

Decorative images are pictures that are 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.

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; it is simply an aesthetic complement to the page.

Code for image
<img alt="" aria-hidden="true" class="feature-image-full" role="presentation" src="_image/features/broken-link.jpg">

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 they are 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

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."

Images of text

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.


Ranked by G2 - Best Support - Summer 2022
Code for image
<img alt="Ranked by G2 - Best Support - Summer 2022" src="_image/DigitalGovernance_BestSupport_Enterprise_QualityOfSupport.jpg">

Complex images

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 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.

Did this answer your question?