Alt Text Accessibility Rules

Alternative text (alt text) is a short textual description of an image that is read by screen readers and other assistive technologies. Proper alt text ensures that people who cannot see images can still understand the content and purpose of visual elements.

Why Alt Text Matters

Legal compliance: Many jurisdictions require web content to be accessible under laws such as the ADA (U.S.) or the Equality Act (UK).
User experience: Visually impaired users rely on clear alt descriptions to navigate and comprehend pages.
SEO benefits: Search engines use alt attributes to index images, improving discoverability.

General Principles

Be concise but descriptive. Aim for 125 characters or fewer while conveying the essential information.
Describe function, not appearance. If the image conveys meaning, explain that meaning; avoid phrases like image of.
Never use picture of or photo of. Screen readers already announce that its an image.
Avoid redundancy. Dont repeat information that is already present in surrounding text.
Use proper punctuation. Treat the alt text as a short sentence.

Specific Scenarios

Informative Images

These images convey information essential to understanding the content.

HTML:

<img src="chart-sales.png" alt="Bar chart showing 2023 sales: Q1 $1.2M, Q2 $1.5M, Q3 $1.8M, Q4 $2.0M">

Decorative Images

When an image adds no meaning, it should be marked as decorative so it is ignored by assistive technology.

<img src="sprinkle.png" alt="" role="presentation">

Or, use CSS background images instead of <img> tags.

Functional Images (Buttons, Links)

Describe the action, not the visual representation.

<a href="settings.html">    <img src="icon-gear.svg" alt="Open settings"></a>

Complex Images (Charts, Diagrams)

Provide a concise summary in the alt attribute and a detailed description elsewhere, such as in a <figure> caption or a linked data table.

<figure>    <img src="map.png" alt="Map of Europe showing population density">    <figcaption>Population density is highest in the Netherlands and lowest in Iceland. For a full data table, see <a href="#population-data">Table 1</a>.</figcaption></figure>

Logos and Brand Images

Identify the brand or organization.

<img src="logo.svg" alt="Acme Corp logo">

Testing Alt Text

1. Screen reader test: Turn on a screen reader (NVDA, VoiceOver, or JAWS) and navigate the page. Listen for how each image is announced.

2. Automated tools: Use Lighthouse, axe, or WAVE to flag missing or empty alt attributes.

3. Keyboard only: Tab through interactive elements; ensure imagebased buttons have meaningful alt text.

Common Pitfalls

Leaving alt attributes empty on informative images.
Writing image of or picture of .
Overdescribing simple icons (e.g., red star icon for a favorite button; use Add to favorites).
Duplicating caption text in alt text.
Using the same alt text for many different images.