Image accessibility: alt text and best practices

Why alt text matters

Alt text (alt attributes) allow screen reader users to understand image content. It's one of the most fundamental RGAA criteria and the most frequently violated.

Best practices for informative images

• Describe the function, not appearance: "RGAA Test logo - Back to home" rather than "Purple image with circle"
• Be concise: 80-100 characters max in most cases
• Don't use "Image of..." (screen readers already announce "image")
• Include text visible in text images

<!-- Good -->
<img src="graph.png" alt="2025 sales: 15% increase in Q3, €80M revenue" />

<!-- Bad -->
<img src="graph.png" alt="graph" />
<img src="graph.png" />

Decorative images: empty alt

Purely decorative images should be hidden from screen readers:

<img src="ornament.svg" alt="" role="presentation" />

Accessible SVGs

<!-- Informative SVG -->
<svg role="img" aria-label="Monthly statistics">
  <title>Monthly statistics</title>
</svg>

<!-- Decorative SVG -->
<svg aria-hidden="true" focusable="false"></svg>

Quick checklist