Excerpted from guidelines written by Molly Brush
This is the first in a series of posts on creating web content that meets accessibility standards. Warning: this post makes reference to gerunds.
In his September 2016 Memo to IU Staff Regarding Accessibility on the Web Regulations and IU Responsibility, IU President Michael McRobbie announced that, in keeping with IU’s commitment to “maintaining an inclusive and accessible environment across all of its campuses,” all Indiana University websites launched after November 1, 2016, must meet Web Content Accessibility Guidelines (WCAG) 2.0 AA standards.
IU Communications guidelines
Here are the current alt text guidelines followed by IU Communications content specialists. Some are specific to the requirements of the IU web framework, but many are best practices suited to all web development.
To ensure that IU websites comply with accessibility standards, IU Communications must provide a short text alternative (“alt text”) for non-text content—in other words, we must include alt text for any content that is not text, including images, charts, graphs, and diagrams.
Alt text requirements
Every image must have an alt attribute, whether that is alt text or an empty alt attribute (alt=””).
All images on IU framework websites should have alt text, except profile headshots, which should have empty alt attributes.
In general, the image should dictate the length and structure of the alt text. Use the idea of describing the image over the phone as a guiding principle, and keep in mind these recommendations.
Alt text should be a phrase or a short sentence. Five to 15 words is ideal, but it must not exceed 100 characters, including spaces and punctuation.
- An aerial view of University Tower, one of IUPUI’s residence halls
- A magnified fruit fly
- Two students cheer on the IUPUI Jaguars at an athletic event.
- A student sits and reads on a limestone ledge outside the Chemistry Building.
Both phrases and complete sentences are acceptable in alt text, depending on the image. (Complete sentences should use periods; phrases should not.) However, phrases composed of a subject followed by a gerund should be avoided.
- Acceptable: IUPUI Chancellor Nasser Paydar sits at a table with a group of students.
- Avoid: IUPUI Chancellor Nasser Paydar sitting at a table with a group of students.
Alt text cannot include double quotes. Single quotes are OK.
Avoid the use of ampersands in alt text. If there is a compelling reason to use an ampersand, use HTML code for it: &
Alt text should not use the phrases “image of . . .” or “graphic of . . .” to describe the image. If the fact that an image is an illustration, etc., is important contextual information, it may be useful to include this in the alt text.
Even if there is a caption for an image, be sure to include alt text for that image. The IU framework automatically ignores alt text if there is a caption present, but if that caption is ever removed, the alt text will appear.
If an image (or chart, diagram, etc.) contains text, the text should be included in the alt attribute. It’s OK to exceed the 100-character limit IF the alt text repeats verbatim the text in the image. If you summarize or otherwise change the text in the image, you must keep it to 100 characters or fewer.
Whenever an image is within a link, the function of the image must be presented in alt text that is also within the link. The alt text must convey the purpose or destination of the link (i.e., the alt text should be whatever the link text would have been if the link contained only text instead of an image).
Image file placement and naming
Make sure that image files are placed in the correct folders in the WCMS.
Use the appropriate format for image file names.
- Hyphens, not underscores
- All lowercase
- No spaces
Make sure that image file names are accurate and descriptive, with correct spelling.
IU Communications recommends using the Web Accessibility Evaluation Tool (WAVE) to ensure that images have alt text that does not exceed 100 characters. If you use Chrome as your web browser, you can add a WAVE extension to your toolbar. If you use a different web browser, you can visit wave.webaim.org and enter the URL of the page you wish to check.
Creating accessible alt text is just one component in the development of websites that conform to WCAG 2.0 AA standards, but it’s one that is often overlooked. Future posts will cover accessible pdfs, video transcription, heading hierarchy, and link labeling, among other elements.
To learn more about creating accessible websites at Indiana University, review https://accessibility.iu.edu/help/.