Striving to remove barriers that prevent us from building Vibrant, Diverse, Inclusive, Accessible Communities!

As Baha'is, we value and celebrate Unity in Diversity and respect how each person self-identifies. To honor this commitment, it’s essential to create accessible content by effectively using alt text, captions, and titles when we publish images. This practice ensures that users who are Blind and Low Vision have equal access to the information we share. When including images, it's important to provide descriptive alt text that conveys the visual details and includes information reflecting our dedication to Unity in Diversity and respect for how each person self-identifies.
This article is designed to guide you in effectively implementing these elements in accordance with Best Practices and the International Accessibility Standards:
Descriptive Elements in Images
1. Alt Text
Alt text provides a concise description of a picture or image for screen reader users. For example, alt="A smiling Black man in his 40s with short hair, wearing a dark suit and tie, holding a framed award and standing in front of a wooden podium."
gives a brief but clear description of the person's age, identity, presentation and context. This ensures that users relying on screen readers can understand the image’s content and context, presenting the person’s identity and how they are represented in the image, including what they are doing. The Alt Text should reflect the reason the image was included.
If a caption will also be used, it is important not to repeat the same information in the alt text. The alt text should convey the visual elements of the image for someone who cannot see it, while the caption can provide additional context or details. (Compare the Alt Text in the example above with the Caption text in the example below)
2. Captions
Captions offer additional context or description for an image, often including details like commentary or attributions. For instance, <figcaption>James Johnson at the 2024 Annual Achievement Awards.</figcaption>
provides context about the person in the photo, including his accomplishment. Image captions provide background or situational context, identify people, places, or objects, and offer further clarification that enhances the understanding of the image.
3. Titles
Titles help identify and number images, particularly in long-form documents. For example, Figure 1: Visitor numbers to the Green Trees main walk, 2008 to 2019
helps users locate and reference specific images within the text. Titles are useful for organizing content but do not typically include descriptive attributes about people.
4. Extended Descriptions
Extended descriptions offer a detailed explanation of complex images, such as charts or diagrams, and are usually linked or available on a separate page for a thorough understanding. For instance, an extended description of a photo might elaborate on the historical context of an event, the significance of the subjects in the image, or detailed observations that provide a deeper understanding beyond the brief alt text.
Sidestepping Responsibilities: The Importance of Proper Alt Text for Inclusive Access
In an effort to sidestep the responsibilities of providing equal access, many content providers misuse the alt=""
attribute, marking images as decorative even when they contain essential information or information which is conveyed to others based on what they depict. This practice does not foster inclusion; instead, it perpetuates discrimination and exclusion by denying People with Disabilities access to crucial content, which is presented to other readers. Alt text and captions are not just technical details used to subvert Automated Accessibility checking, but vital components of an inclusive environment, ensuring that everyone can perceive and interact with the information equally.
Understanding when to use descriptive alt text or captions versus when to mark an image as decorative is crucial for creating genuinely inclusive content. Correct usage empowers all users, especially those relying on screen readers, to fully comprehend and navigate content. By adhering to the appropriate guidelines and recognizing the importance of these elements, content providers can contribute to removing barriers and fostering an inclusive and equitable environment.
Types of Images and Appropriate Descriptions
Decorative Images
Definition
Decorative images don’t add information to the content. They might be used to make content more visually and spatially attractive or the information they provide might already be given using adjacent text.
Usage
In these cases, a null (empty) alt text should be provided (alt=""
) so that assistive technologies, such as screen readers, can ignore them. Including text values for these types of images can add audible clutter to screen reader output or distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is not an option because some screen readers will announce the file name of the image instead.
Examples of Decorative Images
- Visual Styling: Borders, spacers, and corners.
- Supplementary Link Images: Images that improve link appearance or increase the clickable area without adding information.
- Illustrative but Non-Informative: Images that illustrate adjacent text but don’t contribute additional information.
- Identified by Surrounding Text: Images sufficiently described by adjacent text.
Informative Images
Definition
Informative images convey simple concepts or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content displayed visually, which typically isn’t a literal description of the image. An infographic provides a one example of an Informative Image. There are more examples listed below.
Usage
Whether to treat an image as informative or decorative is a decision authors make based on the reason for including the image in the first place. Consider what the image conveys and whether excluding it would provide equal access to the information being conveyed. If the decision is to exclude it and mark it as decorative, then reflect on why it is included for everyone else.
Examples of Informative Images
- Labeling Information: Icons identifying a telephone or fax number.
- Supplementing Information: Images that add to the information provided in the text.
- Conveying Information: Diagrams or images that illustrate a concept or process.
- Impression or Emotion: Images that convey a mood or feeling. (Be careful with this one)
- File Format Icons: Icons indicating different file formats.
Functional Images
Definition
Functional images are used to initiate actions rather than to convey information. They are commonly found in buttons, links, and other interactive elements.
Usage
The text alternative for a functional image should convey the action that will be initiated rather than a description of the image.
Examples of Functional Images
- Linked Logos: Images that link to the home page or other significant pages. (It is also good practice to indicate that this is a logo for XYZ and the function) ie. XYZ Logo - Home Page Link
- Icons Indicating Actions: Icons representing actions such as printing, searching, or opening a new window.
- Button Images: Images used in buttons to initiate specific actions.
Final Take-Aways
Ensuring accessible content for People who are Blind or have Low Vision relies on the effective use of descriptive alt text, captions, titles, and extended descriptions. Descriptive alt text conveys the visual details and context of images, making them accessible through screen readers. Captions provide additional context, while titles help organize images within documents, and extended descriptions offer detailed information when needed. By avoiding the misuse of alt text and correctly distinguishing between decorative and informative images, we support an inclusive and equitable environment. Adhering to these Best Practices and International Accessibility Standards is essential for removing barriers and enhancing accessibility for People who are Blind or have Low Vision.
For more detailed guidelines and best practices, always refer to the latest WCAG guidelines to ensure your content meets the International Accessibility Standards.
Also See:
Share or Print with:
