Graphics should be used in moderation, but when they are used, all graphics must have a message or purpose; therefore, they must all have alternative text.
Why is alternative text required?
While it is a requirement in federal (Section 508) and state (TAC 206) laws, there are some obvious functionality problems that can and will occur, such as graphics not loading up in areas with low internal connections/signals. When a graphic does not load, alternative text appears on the screen. If the text does not provide context for your message, your constituents will not understand the full purpose of your content. Alternative text also allows you to include keywords important for your SEO rankings.
Before placing graphics on web or non-web content, you should consider universal design (relaying a message once by providing all the necessary components to look seamless) when organizing your content:
- Avoid repetition (e.g. embedding a flyer graphic and its alternative text on a page as well as placing all the text next to the graphic): Repetition is unprofessional. It also makes you appear to be insulting the intelligence of your constituents by repeating yourself as though they “didn’t get it the first time.”
- Avoid text heavy images (e.g. a graphic with an un-selectable table of data): Screen readers (for your blind constituents) cannot scan, skip, or pause and resume reading the alternative text. Your constituents cannot highlight the text of your graphics to copy/paste anywhere else, which creates an undue burden of forcing them to type and memorize content.
Guidelines for Alternative Text
To avoid making your constituents read nonstop text, the alternative text character limit is around 125 characters.
Treat alternative text just like normal text:
- Use appropriate punctuation (minus the final period at the end of the last sentence to assist in meeting the 125 character limit)
- Use correct grammar
- Use capitalization on proper nouns, including names and titles
- Check your spelling
Alternative text should serve the context of your message. Imagine the graphic is not there on the document − just text − and provide extra meaning to your message:
- Determine what the purpose of your graphic is: emotional, functional and/or instructional?
- Use terminology that relates to your constituents.
- If parts of the graphic are important, describe them.
In other words, keep it short and sweet, but include information your visually able constituents would be able to take away from it.
Determine what is necessary in the text describing your graphic:
- Redundancy: Terms like “image of”, “logo” and “picture” are not require since the screen reader informs your blind constituents that they are on a graphic.
- Style/Theme: Unless the style of the graphic displayed is part of your narrative to draw a certain response, you do not need to describe how the graphic is designed.
- Length: Unless you are describing a complex graph, chart or anatomy of an object, a thesis paper is not necessary. If you are, you will need to link to a separate page with a longer textual description.
|Bad Alternative Text||Why is it Ineffective?|
|cid:[email protected]||Caused by a lack of alternative text when viewed on certain mobile video. It provide no information whatsoever of what the image is about. It is not readable, burdening screen reader users as it spells out each character or reads out each word.|
|04C05A06045DFC78||Caused by poor application design when alternative text is not provide by content maintainers. The random numbers and letters generated provide no information whatsoever of what the image is about. It is not readable, burdening screen reader users as it spells out each character.|
|filename.jpg||It provide no information whatsoever of what the image is about. It is not readable, burdening screen reader users as it spells out each character or reads out each word, followed by the spelling of the file extension.|
|Dog||While accurate if it is a picture of a dog, it does not provide the additional information the visual user may be receiving, including tone or purpose.|
|Image of a dog||While accurate if it is a picture of a dog, it does not provide the additional information the visual user may be receiving, including tone or purpose. It also is redundant as the screen reader already notifies the user that they are viewing an image, picture or graphic.|
|Purple shape and white outline of the State of Texas embossed behind an embossed block T to the right of purple text in font family Adobe Garamond in 26 point in all uppercase of Tarleton State University above purple text of in font family Adobe Garamond in 14 point in camel case of The Texas A&M University System.||This might be an accurate description of the logo for Tarleton State University, however, this description is better suited outside the image on a marketing design page, not every electronic document. It is over 125 characters in length, so portions of its description are also lost depending on the screen reader.|
|Click here to fill out the application||It does include a call to action, however, it assumes the method that every video uses is the click functionality of a mouse.|
Taking some of the bad alternative text examples above, here are some tips on how to properly convey the importance of the image in alternative text:
|Bad Alternative Text||What Do You Need to Convey?|
|Dog||What is the dog doing and how should it make the visual user feel? Is it informative, like a diagram, requiring some explanation not covered in the text around the image?|
|Purple shape and white outline of the State of Texas embossed behind an embossed block T to the right of purple text in font family Adobe Garamond in 26 point in all uppercase of Tarleton State University above purple text of in font family Adobe Garamond in 14 point in camel case of Member of The Texas A&M University System.||When referencing a logo of any kind, stick to the important text. Tarleton’s requirements for alternative text on our logo include “Tarleton State University – Member of The Texas A&M University System”. Note “logo of” is also not included as it is understood when used in the header or footer of a document.|
|Click here to fill out the application||Instructions in a call to action should be succinct and non-videospecific. E.g., “Fill out the application by January 30”|
Guides and How-To’s
- Usability.gov’s Web Standards and Usability Guidelines
- Chapter 3: Accessibility
- Chapter 14: Graphics, Images, and Multimedia
- Web Accessibility Initiative (WAI)
- Designing and Developing
- Make link text meaningful
- Write meaningful text alternatives for images
- Provide clear instructions
- Keep content clear and concise
- Provide sufficient contrast between foreground and background
- Don’t use color alone to convey information
- Create designs for different viewport sizes
- Include image and media alternatives in your design
- Web AIM
- National Center for Accessible Media (NCAM)
- WebAIM: How to create an accessible infographic
- Interactive Accessibility: Creating an Accessible Infographic
- WCAG 2.0 Guideline 1.1 – Text Alternatives
- Understanding WCAG 2.0 Guideline 1.1
- Techniques for WCAG 2.0 H45: Using longdesc