28 Alternative Text for Images

One of the Web Content Accessibility Guidelines is to provide equivalent alternatives to auditory and visual content. We’ll talk about adding alt text for images here. Though, the same principles apply to audio-visual media, applets, or non-text objects and embeds.

The addition of alternative text for images will help someone who is blind or has vision difficulties know what is the content, purpose or function of an image. It can also help sighted users with mobility impairments, who are using dictation software to navigate, when an image is also a link. Alt text helps sighted users who may be using a browser with images turned off, perhaps to load pages faster, save on bandwidth or data usage when roaming. Alt text will also help search engines index your images.

Alt text (short for alternative text) is a complex topic to discuss. You’ll get different ideas about what alt text should be, depending on what reference you read, or who you talk to. All images presented in an HTML document should have what is referred to as an alt attribute. The alt attribute will either contain text that conveys the meaning or function of the image, or it will be left empty or null. Images generally fall within three types: functional, informative and decorative. Decorative images always use a null (or empty) alt attribute and the functional and informative images sometimes use a null alt attribute or they require text that conveys the meaning or function of the image. Whether or not an image requires alternative text within the alt attribute, or if it is left empty (null) depends on its context within the page. The Web Accessibility Initiative has a good tutorial on alternative text and a decision tree for helping you decide how to write the alt attribute. WebAIM’s article on alt text is helpful also, but some of their scenarios don’t have an objective right or wrong way.

We’ll look at examples of the different types of images and discuss how to write the HTML code for accessibility. Alternative text as well as a title (screen tip) can be created with the non-code, WYSIWYG part of Blackboard’s content editor, when inserting an image. Within Blackboard’s content editor, an empty alt attribute can be added by simply putting your cursor within the Image Description field and pressing your spacebar once to create one empty space. You can then toggle over into the HTML Code View and delete this space to make the alt attribute null.

The following are general guidelines for alternative text:

• The text alternative should be equivalent to the meaning, purpose or function of the image
• Keep it short. Usually a few words will do, but sometimes a sentence or two may be needed. Images requiring a longer description can use a longdesc attribute that links to another page with a more comprehensive description, or the information can be written within the body of the document that contains the image.
• Use a null or empty alt text attribute if the same information is presented in the text adjacent to the image, or if the image is purely decorative. The former is to reduce redundancy when the information is read to the end user.
• Don’t start the alt text with “image of” or “graphic of.” A screen reader announces when it encounters an image. You may explain that the image is an illustration, painting or photograph when it conveys content, such as in an Art History course that displays many examples of paintings showing different styles or subject matter.
• For functional images, don’t start the alt text with “link to.” A screen reader announces that it is a link.