Image Alt Text
While images make your guide engaging and pleasant for many visitors, they can pose inherent barriers to accessibility because they are a visual medium and conveying the relevant context and meaning of an image is subjective.
In a mobile app, one way of making images more accessible is to add alternative text (commonly shortened as alt text). This topic explains how to create alt text for your images.
In This Article
What is Alt Text?
Alternative text (alt text) is a brief written description that replaces the experience of seeing an image. Alt text translates the image’s purpose, context, and key visual information into words, so that people can understand and navigate the screen using a different sense (e.g., hearing or touch). Alt text should be short and objective; alt text is not the place to provide subjective or interpretive information, or any information that a sighted user could not glean by looking at the image.
Primary Audience
People who are blind or have low vision.
Experience
Alt text does not appear as text on a screen. Alt text is read out loud by a screen reader or converted to a braille display to improve or replace the experience of seeing an image.
Creating Alt Text
It’s important that you add alt text to all images in your guide. Try not to think of alt text as a completely new field; it is intended to provide the same information that the image itself conveys, so sighted and non-sighted visitors can have an equivalent experience of the same content.
Alt Text Tips
- Don’t repeat the image caption.
- Be concise.
- Most sources suggest keeping alt text to 125 characters or less (1-3 brief sentences). Remember that someone is listening to the alt text to get a sense for the basic information on the screen, as if they were glancing at the screen, so they don’t want to sit through a lengthy paragraph.
- Be objective.
- Do not include information about the historical context, artist, or technique unless such details would be obvious to a sighted user.
- Lead with the most essential information, so someone could skip through the content if needed.
- If an image includes text, include the exact words in the alt text.
- Avoid words like “image” and “picture.”
- Screen readers automatically announce the object as an image.
Providing inappropriate alt text can be as problematic as not providing alt text at all, since users can be confused by the alt text or overloaded with unnecessary information.
Alt Text in Context
What’s the difference between image alt text, image caption, item description, and verbal (audio) description?
In your Bloomberg Connects guide, all of these elements serve a unique purpose and can work together to provide a robust and accessible experience.
- Image Alt Text: Strongly recommended. Specific to an individual image. The text equivalent of the image itself. Does not provide any additional interpretive information. Does not appear on the screen but is read out loud by a screen reader.
- Image Caption: Strongly recommended. Specific to an individual image. Usually identifies the image to meet legal attribution requirements, though your organization may choose to include more information. Appears onscreen, directly below the full screen image.
- Item Description: Strongly recommended. Applies to an entire Item. Provides supplemental or interpretive information about the item (e.g., the work of art, object, or architectural feature).
- Verbal (Audio) Description: Optional. Applies to an entire Item. An audio track that uses interpretive language to provide a detailed description of the object. Verbal descriptions are recorded by a human and include much more detail than would be appropriate for alt text.
Take this image as an example:
- Image Alt Text: A bronze globe covered in carved constellations rests on a blindfolded reclining figure on a marble base.
- Image Caption: Paul Manship, Celestial Sphere, 1934
- Item Description: An avid stargazer, Manship was fascinated by the constellations, the signs of the zodiac, and their relationship to classical mythology. He used those motifs to create the Celestial Sphere. A 12-foot diameter version of Celestial Sphere is featured in the Woodrow Wilson Memorial of the Garden of the United Nations, in Geneva, Switzerland. In that version, bronze was used from the much larger base, in place of marble.
- Item Verbal Description: In this piece, Manship laid carved bronze figures of constellations over the hollow frame of the globe. Under each figure is a banner that bears the constellation's name. The figures are painted gold while the frame and supporting structure of the globe is a dark patinated bronze. The globe is supported by a reclining female figure with a long ribbon covering her eyes like a blindfold to signify the unknown.
Alt Text Examples
Remember that the context in which someone encounters the image is critical when it comes to writing strong alt text. The following section provides just a few examples for how you might use alt text in your guide.
Subject: Art
Context: A photograph of a work of art in an Item dedicated to that work. The audience should get a brief, high-level sense of what the work of art looks like.
Alt Text: Against a dark background, a woman wearing a blue and yellow head wrap looks over her shoulder. A large pearl earring reflects the light.
Subject: Person
Context: An image used in an Exhibition of famous authors. The audience does not need to know all the details.
Alt Text: Author Toni Morrison at a desk in her upstate New York home
Subject: Plant
Context: A photograph of a living botanical specimen from an organization’s garden or grounds, provided for informative and aesthetic purposes, rather than scientific purposes.
Alt Text: A macro photograph of a cherry tree in bloom with small, light pink blossoms.
Subject: A building, room, or other physical space
Context: The hero image for an Item used to provide “About Us” information.
Alt Text: The museum's lobby and entrance to Gallery 1.
If this image was used in an Item dedicated to introducing an exhibition space or gallery, or if it was used to illustrate something specific about the building's architecture, the alt text should include different, more relevant details. For example, we might mention the wood panelling, the pattern on the floor, or the layout, depending on what's most pertinent.
Alt Text Resources
General
- Alternative Text (WebAIM)
- Images Tutorial (Web Accessibility Initiative)
- Alt-texts: The Ultimate Guide (Axess Lab)
- Image Descriptions (Diagram Center: A Benetech Initiative)
- How to Write Alt Text and Images Descriptions for the Visually Impaired (Veronica Lewis (Veronica with Four Eyes))
- Alt Text (Material Design)
- How to Write Alt Text for Photojournalism Images (Veronica Lewis (Veronica with Four Eyes))
Alt Text for Art
- How Museums are Making Artwork Accessible to Blind People Online (ArtNews)
- Alt Text and Accessibility: Describing the Act of Looking (RISD Museum)
- Digital Accessibility (Sam Fox School of Design & Visual Arts at Washington University in St. Louis)
- Guidelines for Image Descriptions (Cooper Hewitt)
- What is “equivalent” text alternatives for artistic and cultural visual content? (Axe-con 2024)
- Alt-Text for Art and Design Images (Sam Fox School of Design & Visual Arts at Washington University in St. Louis)
- How to Write Alt Text for Amatuer Art (Veronica Lewis (Veronica with Four Eyes))
Alt Text for Architecture
- Alt-Text for Architecture Images (Sam Fox School of Design & Visual Arts at Washington University in St. Louis)
- The Description of Architectural Drawings (The Getty Museum)
- How to Write Image Descriptions for Buildings and Architecture (Veronica Lewis (Veronica with Four Eyes))
Verbal Descriptions
- Learning Tool: Verbal Description (Art Beyond Sight)
- Guidelines for Verbal Descriptions (Art Beyond Sight)