Web and eLearning content increasingly relies on visual assets—photos, videos, graphics, charts, infographics, and visual storytelling—to convey information. For users who have visual impairments or who are blind, and for those who access the content on a device that doesn’t easily render graphics, that visual content can present an obstacle to understanding. Creating alt text descriptions is the primary way that content creators can build accessibility and usability into online content. But it turns out that writing useful alt text is not so simple.
Alt text is a description of an image that is encoded in the content. Screen readers and other assistive technologies look for tags—HTML tags and other codes—that convey information about content type and relationships between content items. This coding allows the screen readers to identify headings, tables—and visual elements. Many images have captions, but to be accessible—and to comply with international standards, such as AA-level WCAG 2.0 specifications—they should also include alt text descriptions.
Most word processing, social media, and authoring tools offer a field where developers can easily enter an alt text description of any visual content; entering this description adds only one simple step when inserting and formatting photos, charts, and other visual elements.
Guidelines for writing alt text
Useful alt text descriptions are highly dependent on context. Even so, content developers and editors can start with these basic guidelines:
- Alt text should be short and descriptive.
- Don’t state that it is a photo or graphic.
- Don’t repeat information that is already provided in the text.
- Include descriptive details that add context and let the learner know why the image is included as part of the content.
- Images that are purely decorative, such as border designs, or images that serve as bullets do not need alt text descriptions.
- Include SEO keywords in alt text descriptions if appropriate.
- If the image contains text, include that text in the alt text description.
- For complex charts or graphics, or for infographics, the longdesc attribute can be used to link to a separate text file that offers a detailed explanation. (This attribute can be part of the HTML <img> tag, providing additional information along with other attributes, such as source, alt, height, and width, for example.)
- An even better solution for complex images, charts, or infographics is to present the same content in an alternative format, such as a written article.
It’s all about context
Individuals who rely on alt text descriptions to access visual content agree that there’s no formula for writing useful alt text because what works is so context-dependent. Editors and eLearning developers should consider why they chose an image and what sighted learners will gain from it when composing alt text.
For instance, when describing a photo that accompanies a news story or informational text, explain “why this photo is important and what in it matters,” said Abigail Lanier, a production and mentor coordinator at Learning Ally. For instance, she said, in a news article about refugees, you might describe some of the items a family took with them and that appear in the photo with the family.
Some details are necessary to provide context that the user needs to understand the article: In a photo of a leader, Lanier said, it might be useful to “identify the people in the photo and say whether the leader is riding a horse—or describe what they’re wearing.” Facial expressions convey visual information that can be vital to understanding the context and the content, so the alt text should say if a person has a “sinister expression or she looks confused,” Lanier said. “These details help emphasize why that photo is there.”
But some details don’t matter: “Describing the colors is not important if I can’t see them,” she said. And, there’s no need to repeat descriptive details that are already provided in the text. The alt text for a photo accompanying an interview or biographical article might describe her facial expression or what is happening in the photo, rather than echo a physical description that is provided elsewhere.
Information about relative size and placement of people, animals, and objects in a photo is extremely helpful, according to Deni Elliott, the head of the journalism department at University of South Florida, St. Petersburg. So, for instance, alt text that says, “A casually dressed man walks down a path with trees along both sides; a standard poodle is following him” is more effective than alt text describing the same photo this way: “A man in a red shirt walks a black dog.”
“I think that when you are taking in something visually, you are getting something different,” Elliott said. Other ways she relies on to gather information are tactile—which doesn’t work online—and aural or verbal content or descriptions. But these descriptions must move away from reliance on visual information. Elliott said that even the way many sighted people describe images is highly visual; effectively describing something for a non-visual person requires thinking about it differently.
She cites the example of a pie chart. A description that says: “A red wedge shows that 24 percent of spending goes to security; a green wedge shows that 12 percent of spending goes to teacher salaries, and a blue wedge shows that 8 percent goes to books and supplies…” is a very visual description. That is less helpful to a blind user than a description that shows relationships: “Twice as much is spent on security as on teacher salaries, and security spending, which makes up 24 percent of the budget, is triple the amount spent on books and supplies.”
For content that consists of infographics or complex charts or tables, alt text might not suffice. Lanier said she might not want all the information that’s displayed in a 20-row, five-column chart to be crammed into alt text; it’s too much to process. Instead, the same information could be provided in a separate content piece written with non-visual users in mind.
To repeat or not to repeat?
Advice differs on how much information an alt text description should repeat. Sometimes, editors or content creators use the same text for the caption and the alt text, for example. Lanier is fine with that; Elliott believes it is unnecessary—and a missed opportunity to provide additional information. They agree on one thing though: Even poorly written alt text is better than none. Without alt text, they won’t even know that an image exists.
A common error that many content creators make is assuming that the screen reader will read any text in an image or infographic; consequently, they omit that text from their alt text descriptions. But even if something appears to be text, if it is part of an image file, the screen reader recognizes it as an image. That means that any text that is part of a logo, a photo or graphic, an infographic—anything that is not actual text—is not read by the screen reader. In these instances, repetition is vital: Alt text should include all text from the image.
An added benefit
Writing useful alt text descriptions is a key step in making content accessible to learners who have visual impairments. But, as with most accessibility features, everyone benefits—even the publisher. The alt text is searchable, which means that it can boost SEO results. When writing alt text, editors can include keywords, if they are appropriate to the description.