Why a11y?

Text Alternatives

Importance of Alt Text

Text alternatives (alt text) are essential for users who cannot see images, charts, or icons, including people using screen readers or those with slow internet connections where images may not load. Alt text allows them to understand the purpose and content of the image, ensuring a more inclusive user experience.

General Guidelines for Writing Alt Text

Be Descriptive but Concise

  • Aim to describe the image’s content and function clearly in one or two sentences.
  • Avoid unnecessary details that don’t add value to the context.
  • Example: For an image of a person skiing in the mountains, use: "Person skiing down a snowy mountain with pine trees in the background."

Consider the Function of the Image

Different types of images need different kinds of alt text based on their purpose:

  • Informational Images: Provide alt text that conveys the purpose of the image.
    • Example: For an image of a stop sign, use: "Stop sign."
  • Functional Images (Icons): Describe the action or function of the icon (e.g., buttons or links).
    • Example: For a search button, use: "Search button."
  • Decorative Images: If an image is purely decorative and provides no additional information, use an empty alt attribute (alt=""). This prevents screen readers from reading unnecessary information.

Avoid Redundancy

If the surrounding text already explains the image, there’s no need to repeat that information in the alt text. For example, if a caption already describes the image, you can leave the alt text empty.

Avoid Using "Image of..."

Screen readers automatically announce the presence of an image, so there’s no need to begin the alt text with "Image of" or "Picture of." Instead, jump right into the description.

Context Matters

Always consider the context in which the image appears. The same image might require different alt text in different contexts. For example:

  • On a blog about wildlife, an image of a tiger might have the alt text: "A Bengal tiger prowling through the jungle."
  • On a zoo’s ticketing page, the same image might use: "Buy tickets to see the Bengal tiger exhibit."

Guidelines for Specific Types of Images

Charts, Graphs, and Infographics

For charts or graphs, summarize the key information conveyed by the visual. If it’s too complex, a longer description can be provided elsewhere, with the alt text directing users to it.

  • Example: For a bar chart, use: "Bar chart showing sales trends over the last year, with revenue increasing from January to December."

Icons

Icons often represent actions or statuses. The alt text should describe their purpose:

  • Example: For a download icon, use: "Download PDF."
  • Example: For a checkmark icon, use: "Completed."

Social Media Images

For profile pictures, banners, or similar social media images, describe the image content and context:

  • Example: For a profile picture: "Profile picture of John, smiling in a garden."

Testing Alt Text

Screen Reader Testing: Use screen readers like NVDA (Windows) or VoiceOver (Mac) to ensure your alt text conveys the right information.

Manual Testing: Disable images in your browser or use a text-only browser like Lynx to experience how your website works without visual content.

Common Mistakes to Avoid

  • Leaving Alt Text Empty (when it's needed): Don’t skip the alt attribute for essential images. Every image should have an alt attribute, even if it’s empty (alt="") for decorative images.
  • Overusing Alt Text: Avoid adding alt text for purely decorative images (e.g., background images, spacer images, etc.). These should have an empty alt attribute.
  • Too Vague: Avoid being overly vague, such as writing "Image" or "Chart" without any context.
  • Too Detailed: Don’t describe every detail of the image unless it’s necessary for understanding the content.

Example Scenarios

  • Scenario 1: Informational Image
    • Image: A diagram showing the layers of the Earth (core, mantle, crust).
    • Alt text: "Diagram showing the Earth's layers: the core, mantle, and crust."
  • Scenario 2: Functional Image (Icon)
    • Image: A magnifying glass icon that opens a search field.
    • Alt text: "Search"
  • Scenario 3: Decorative Image
    • Image: A background image of a sunset used for visual enhancement.
    • Alt text: alt=""

Tools for Alt Text Evaluation

  • WAVE (Web Accessibility Evaluation Tool): https://wave.webaim.org/
  • Axe Accessibility Checker: https://www.deque.com/axe/

Related links