Tech Notes
Ensuring everyone can access digital content is one of our primary goals at AFB. One high-impact, easy-to-start way to make digital content more inclusive is to include alternate text, or alt text. Alternate text is simply a concise description of an image provided as metadata with the image. Content creators, marketers, web designers, and web developers should always include image descriptions as a part of their workflow. This simple addition improves website, marketing material, and document accessibility.
How do I write alternate text?
The best way to write alt text is to apply Goldilocks principle: not too much, not too little, but just the right amount of description. The goal is to respect everyone’s time by not providing too much extraneous information but to also fully convey what needs to be said.
A good rule of thumb for writing alternate text is to briefly, but fully describe the image. The description should capture the context or relevancy of the image too: why was this image included in the first place? For example, an image of a man in a blue shirt running being used as marketing material, and the intent of the image is to highlight perseverance toward fitness goals. Then, in this case, the alternate text might be “Man running to achieve a goal.” However, if the emphasis is on the shirt, because this is an advertisement for a clothing brand, then the alternate text might be, “Man running wearing a blueberry [Brand’s] QuickDry T-Shirt.” Notice the color choice was blueberry and not blue because this matches the name of the color on the order form.
Tips for Images
- Your goal is to provide relevant context for the image.
- Use short and meaningful descriptions that capture the content fully.
- A longer description may be appropriate in a more casual setting that is purely for entertainment, such as a blog or hobby website.
- Do not use the word “image” or “picture” in the description; the screen reader will already identify it as such.
- Note: An exception to this rule of thumb is the word “portrait.” The word “portrait” can be used to describe an image that is a close up image of a person with focus on the face. For example, “Portrait of [Person’s Name]” or “[Person’s Name]’s Portrait.” Usually, this would be used to describe an image identifying the person, such as a professional author’s photograph used for their biography.
- If possible, avoid pictures of text and use actual text elements. There are exceptions, but overall we recommend avoiding this because images of text tend to zoom-in poorly, are not automatically translatable, and the alt text tends to diverge from the image text over time. If the image must include text, be sure to include that text in the alternate text.
Tips for Decorations
- Do not include alternate text for purely decorative images or visual elements. The alternate text will simply add clutter to the interface.
- Use empty quotes [“”] as null text.
- Do not use the word “not needed” or “decorative;” screen readers will still present this text. This can become cumbersome for meaningless decorations. An example of a decorative element may be an image of scrollwork.
Tips for Marketing Material
- Your goal is to provide relevant context for the image.
- Use short and meaningful descriptions that capture the content fully.
- Nodding to or alluding to why the image was selected initially can help provide context, perseverance towards a goal or highlighting a particular shirt, for example.
Tips for Logos
- Your goal is to provide context for the image without too many extraneous details.
- A best practice for logos is simply to include the brand’s name and the word “logo.” For example, “AFB 100 Logo.” If a longer logo description is used, the following alternate text is acceptable: “AFB Centennial Logo: Gold 100.”
- We generally recommend only the logo name or very short descriptions for logos because too many details can contribute to information clutter. For a longer description, always put the important information first.
Tips for Icons
- Icon alt text should describe the function, not necessarily the literal image. For example, if a magnifying glass icon is used to signify a search function, the alternate text should be “Search” or “Search our Catalog” (depending on context). If the same icon is used to indicate zoom-in, then the alternate text should be “zoom-in.”
How is alternate text different from a caption?
Alternate text is different from a caption in that alt text is a succinct meaningful description of an image while a caption is additional relevant information about an image. A caption could include non-descriptive text and provide additional context. For example, a caption may include the photographer’s name and copyright information. This information does not describe the image but adds additional information about the image.
How do I include the alternate text as metadata?
Including the alternate text itself is platform dependent. It is usually straightforward and simply a matter of adding the markup when embedding the image. For user interfaces, it is usually on the picture options menu.
Alt Text on the Web
Including the alternate text on an image on the web is straightforward: directly include the alternate text in the alt tag.
For example, the following HTML markup shows how to include alt text for a picture of an apple:
<img src= “apple.png” alt= “Ripe Honeycrisp apple.”>
Alt Text in a Microsoft Word Document
- In Microsoft Word for 365 Desktop:
- Have image selected in Word
- Navigate to “Picture Format” in the top toolbar menu
- Select the “Alt Text” button
- A panel will open to add alternate text
Alt Text in a Google Docs Document
- In Google Docs:
- Insert the picture
- Select the picture
- Two options:
- Right-click picture and select “Alt text” from the menu
- Use the quick shortcut key combination of Ctrl + Alt + Y
Alt Text in an Email
- In Microsoft Outlook for 365 Desktop:
- Have image selected in Word
- Navigate to “Picture Format” in the top toolbar menu
- Select the “Alt Text” button
- A panel will open to add alternate text
- In HTML embedded email content:
- Follow the HTML example above.
- Other email platforms generally have this functionality built-in, usually in the picture menu.
Alt Text in Other Platforms
- Generally, the option to add alternate text can be found in the picture menu of user interfaces. The documentation for the software will also generally include instructions on how to include alternate text. If including alternate text is not a function in your platform, please ask the software development team for this as a feature.
- For programmers or software developers, please check the documentation for your chosen platform or library on how to include alternate text. Alternate text is usually included through a markup tag or attribute on an element.
What about Artificial Intelligence (AI) image descriptions?
The meaning behind the image matters for accessibility, and AI image descriptions or AI generated alternative text are only a stop-gap measure, at best. The quality of the image descriptions are improving, but the meaningfulness of the descriptions are not and cannot improve. AI image descriptions do not have enough context to “know” why the image was selected. Moreover, the state-of-the-art for image descriptions is not fully developed. For instance, using a consumer-available alternate text generator on a product picture of a microwave resulted in alternate text of “a red rectangular device” – not accurate nor meaningful.
Let’s use a previous example discussed above to showcase meaningful descriptive text. In a marketing image of a man in a blue shirt running, AI does not have the context behind the image to make an informed decision on the alternate text. It can only state direct facts about the image that may or not be meaningful or accurate in the discussion, such as “Man running wearing a shirt outside.” While this is not wrong, it does not focus on the correct information for the context.
An AI generated image description is not a silver-bullet to ensure the accessibility of image content. The best practice is to take the extra few seconds to create a hand-crafted, meaningful alternate text.
About AFB Talent Lab
The AFB Talent Lab provides accessibility consulting services in conjunction with internship and apprenticeship programs designed to train a new generation of tech workers in digital inclusion, accessibility, and project management. To learn more about our client services or training programs, please visit our website at www.afb.org/talentlab.
