Accessible video
This video provides some excellent examples of how and when alternative text should be used.
My Web Accessible Content Page
This web page will present an overview of alternative text applications. When and how to use alternative text. As well as provide some helpful tips for using the alternative text feature.
Why use Alternative text?
“Alternative text provides a textual alternative to non-text content in web pages.” – WebAIM.org
Every image needs an alternative attribute. Images without alt text will still be found and read by screen readers or other assistive technology. If an image does not have alt text applied to it, the image name will be read by screen readers and could confuse users who can not view the image visually.
Non textual content is any content which is not displayed through text. This includes images, videos, and GIFs. Providing accurate alt text is not just for those using screen readers or assistive technology. Search engines also look for alt text attributes when scanning web pages. Having additional descriptive elements to your non-text content can help your site’s Search Engine Optimization (SEO) score.
W3.org provides a great flow table for images and alternate attributes.
Types of alternative text:
An image’s alt text is largely dependent upon the content around the image and the intention of the web site. When you create a web page ask your self, what am I trying to convey or show with this picture? What is the function of this graphic? Does this image convey information my text does not? Every image needs an alternative attribute.
There are three main types of images: Functional, Informative, and Decorative.
Functional: An image that provides interaction for the user would be considered functional. This interaction could be through a hyper-link, button, or other interactive feature. Functional images require an alternative text that informs users of the action that will occur when clicked rather then the purpose of the image.
Informative: An informative image displays additional information in relation to the content of the page. This information could take the form of words or graphs within the image. Alternate text for informative images should re-state the information contained in the graphic.
Decorative: A decorative image provides nothing other than a pretty picture. Decorative images need a null or empty alternative text to be skipped over by screen readers or other assistive technology. An empty alternate attribute is usually designated with empty quotes: “”.
| Do I use the "empty" alternative text option? | Yes | No |
|---|---|---|
| The image contains words or graphs. | No |
|
| The image serves no contextual purpose. | Yes | |
| The image is a hyper-link. | No |
|
| The image contains no information | Yes |
Alternate Text Examples
Lets take a look at several pictures and show some alternative text options.
This image displays information pertaining to the Graduate Student Showcase. The Alternative text should present the same information contained within the graphic.
This image is a link to Boise State Online. Proper Alternative text for this image needs to let the user know it is a link.
This is a complex picture displaying a sculpture of a rearing bronco. It’s important not to put too much information into the alternate text, the descriptions should be concise. “A metal sculpture of a rearing bronco displayed on a brick laid ground during the early fall season”, would be too much information.
