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

 

Ensuring Inclusive and Accessible Content: Effective Use of ALT Text and Descriptive Elements in Images

By Mike Thompson, 25 July, 2024
A computer screen with an image showing hands using a Focus 40 Braille display connected to a laptop. The image includes text labels "Title," "ALT Text," and "Caption" indicating Accessible Image Components. The device is labeled "Focus 40" and features tactile buttons and a row of Braille cells.
Caption: A Blind person uses a Focus 40 Braille display connected to a laptop. This image shows Accessible Image Components, illustrating how Braille displays enable Blind and Low Vision users to access information on a computer using Screen Reader software that produces Braille output, promoting accessibility and independence.  Note: This only works if the content information is produced following the International Accessibility Standards.

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:

 

 

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

Share or Print with:

Share

Explore More Compelling Insights:

Learn about topics related to People with Disabilities, Accessibility, Anti-Ableism, Removing Barriers, and the Disability Community? Tap the Explore button to discover something new and intriguing with each tap!