A Guide to Alt Attributes for Frontend Developers

Introduction

The alt attribute is a crucial HTML attribute that provides textual descriptions of images, translating visual content into verbal form.
In the context of web accessibility, it plays a vital role particularly in the following scenarios:

• When users with visual impairments use screen readers
• When images fail to load due to network issues
• When users have disabled image display

In WCAG 2.2, proper use of alt attributes is specified under Success Criterion 1.1.1 "Non-text Content" (Level A).
This criterion requires that all non-text content, except for decorative elements, must have text alternatives that serve the equivalent purpose.

https://www.w3.org/WAI/WCAG22/Understanding/non-text-content

Basic Specifications of Alt Attributes

According to the HTML Living Standard, the alt attribute is required for img elements.

https://html.spec.whatwg.org/multipage/images.html#alt

The basic syntax is as follows:

<img src="path/to/image.jpg" alt="Description of the image">

There are primarily two patterns for using alt attributes:

1. Providing Alternative Text
   When an image conveys information, set appropriate alternative text describing its content.

2. Using Empty Alt Attributes
   For decorative images, set an empty value like alt="".
   This causes screen readers to ignore the image's presence.

Key Points for Effective Alt Text

Keep Descriptions Concise and Accurate

Alternative text should focus on the essential information the image aims to convey.
For product images, for example, it's important to concisely describe the product name and key features.

❌ Poor example:

<img src="coffee.jpg" alt="A black ceramic mug with a handle placed on a white background, with steam rising from it">

✅ Good example:

<img src="coffee.jpg" alt="Hot coffee in a black mug">

Context-Aware Descriptions

The appropriate alternative text for the same image may vary depending on its location and purpose.

<!-- When used in navigation -->
<img src="home.svg" alt="Home">

<!-- When indicating current location -->
<img src="home.svg" alt="Current page: Home">

Consider Appropriate Length

While there's no strict character limit for alt attributes, overly long descriptions can impact usability when read by screen readers.
WebAIM and MDN Web Docs emphasize the importance of being "concise" in alt attributes.
https://webaim.org/techniques/alttext/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#usage_notes

For complex diagrams or charts, consider using aria-describedby to provide detailed descriptions when necessary.
(More on aria-describedby later.)

Other Important Considerations

When writing alt attributes, keep these points in mind:

• Avoid redundant prefixes like "image:" or "photo:"
• Don't use file names as alt text
• Use empty alt attributes (alt="") for decorative images
• For images functioning as links or buttons, describe the action that occurs when clicked

Practical Examples by Use Case

Decorative Images

For images used purely for decoration (dividers, background images, decorative icons), set an empty alt attribute.

<img src="decoration.png" alt="">

This prevents screen readers from announcing unnecessary information by ignoring the image's presence.

Images as Navigation Elements

For images functioning as buttons or links, clearly describe what happens upon interaction.

<img src="menu.svg" alt="Open menu">
<img src="twitter.svg" alt="Share on Twitter">

Infographics and Charts

For data visualizations, concisely explain the main information or trends.
Consider using aria-describedby to provide detailed data when necessary.

<img src="graph.png" alt="Sales increased 20% in 2023 compared to previous year" aria-describedby="graph-details">
<div id="graph-details" hidden>
    Q1: $1M
    Q2: $1.5M
    Q3: $2M
    Q4: $2.5M
</div>

Product Images and Logos

For e-commerce product images, include the product name and important visual characteristics concisely.

For company or brand logos, typically use the brand name as alternative text.
However, when functioning as a link, additional context might be needed.

<!-- Product image example -->
<img src="product.jpg" alt="Leather handbag - Brown with gold hardware">

<!-- Logo image example -->
<a href="/">
    <img src="logo.png" alt="Company Name - Return to homepage">
</a>

Alternative Approaches

When alt attributes alone aren't sufficient, consider these alternatives:

aria-label / aria-labelledby

Attributes that provide direct labels for elements.

<button aria-label="Open menu">
    <img src="menu.svg" alt="">
</button>

figure and figcaption Elements

Semantically group images with their descriptions.

<figure>
    <img src="graph.png" alt="Quarterly sales graph for 2023">
    <figcaption>
        Sales grew steadily from Q1, achieving 150% year-over-year growth in Q4.
    </figcaption>
</figure>

Validation and Testing

Screen Reader Testing

Check the following points with major screen readers:

• Alternative text is read properly
• Decorative images are appropriately skipped
• Reading order is logical

Recommended screen readers include:

• macOS: VoiceOver
• Windows: NVDA, Narrator
• Mobile: VoiceOver (iOS), TalkBack (Android)

Automated Check Tools

Use these tools to detect basic issues:

• axe DevTools
• WAVE
• Lighthouse

Summary

Key points for proper alt attribute implementation:

1. Basic Principles

   • Provide appropriate alternative text based on image purpose and context
   • Use empty alt attributes for decorative images
   • Keep descriptions concise and accurate

2. Implementation Best Practices

   • Avoid redundant descriptions
   • Utilize appropriate alternatives when needed

3. Quality Control

   • Regular testing with screen readers
   • Use automated checking tools
   • Code review verification