Text alternatives

Alt text for images

Always include alt. Describe the image's purpose, not just 'image'. Decorative images get alt="". Meaningful images: be specific.

<!-- ✓ Meaningful -->
<img src="dog.jpg" alt="Golden retriever running through grass in a park" />

<!-- ✓ Decorative -->
<img src="divider.svg" alt="" />

<!-- ✗ Vague -->
<img src="dog.jpg" alt="image" />

Complex images & charts

For charts, graphs and diagrams, write a short alt, then give a longer description in nearby text or link to a data table. Screen reader users need the data, not just the visual.

Icons and SVGs

Icon-only buttons need aria-label. SVGs need title or desc elements.

<!-- Icon with aria-label -->
<button aria-label="Settings">⚙️</button>

<!-- SVG with title -->
<svg aria-labelledby="title-id">
  <title id="title-id">Home icon</title>
  <path d="..."/>
</svg>

Alt text writing tips

Be concise (under 125 chars). Don't start with 'Image of' or 'Picture of'. Include relevant context. For infographics, describe the key data point.

Functional images

Buttons as images need alt text describing the action, not the image itself.