The first principle of the Web Content Accessibility Guidelines (WCAG) requires us to create content that is perceivable to people who have sensory disabilities. This includes people who are blind or visually impaired. One way to accommodate people with visual disabilities is to provide alternative text for the images used on your website.
- Introduction to Alternative Text Video Tutorial
- Video Tutorial: Larger Version (.mov)
- Directions (HTML)
- Print Directions (Tagged PDF)
One way to accommodate people with visual disabilities is to provide alternative text for the images used on your website. The alternative text allows a person listening to the website with a screen reader to get a brief description of the information represented by the images. Without alternative text, the screen reader will instead read the file name for the image, which may not always be descriptive. On a web page with many images, the reading of long file names by a screen reader could be frustrating to the user and make it more difficult to understand the content.
Most authoring programs make it easy to add alternative text to an image by filling out a text field. These programs add an alt attribute to the HTML tag used to display the image on a web page. HTML or Hypertext Markup Language is the computer code used to create web pages that can be displayed by a web browser. In the following example, the HTML code used to display the image on a web page is as follows:
<img src=”bf.jpg” alt=”Benjamin Franklin” />
In this example, IMG is the HTML tag for adding an image. This tag is followed by SRC, which stands for source and points to the file name for the image. The file name is enclosed in quotes. Next comes the ALT attribute, which is also enclosed in quotes.
Here are some guidelines for creating good alternative text:
- Be accurate: make sure the information in the alt attribute accurately reflects the content represented by the image.
- Be succinct: 8 to 10 words should be enough to provide accurate alternative text for an image without disrupting the flow of the content. For more complex images, such as charts, you can link to a separate file with a more detailed description. This is done by including the LONGDESC attribute followed by the address of a text or HTML document containing the longer description.
- Do not use the words “image of” or “graphic of” in your alternative text. Most screen readers will announce when they come across an image on a web page by saying the word “image” or “graphic.” Including these words in your alternative text would make it redundant.
When the image is already described by the text around it, you should include a “null” alt attribute. This is done to avoid presenting redundant information to the person listening to the web page. In the following example, the alternative text is as follows:
<img src=”bf.jpg” alt=”” />
Benjamin Franklin
Please note that there is no space between the quotes when including a null alt attribute. In this example, we would use a null attribute because the image is already described by the text caption underneath it.
The null alt attribute is also used for decorative images such as bullets and dividers.
When an image is used within a link, the alternative text should describe the function of the image. In the following example, a set of images is used to indicate the tabs on a navigation bar. Each image is enclosed by a link that points to a different page on the site.
For the first image, the alternative text should read as “Products” since that is the page you will be taken to when you select this link.
