How to Add Alt Text to Images
What is this?
Alt text (alternative text) is a description of an image that screen readers announce to visually impaired users. It also displays when an image fails to load, and helps search engines understand your image content.
Why it matters
- Accessibility: Required by WCAG 2.1 (Level A). Screen reader users cannot perceive images without alt text.
- SEO: Search engines use alt text to understand image content for image search rankings.
- Resilience: Alt text displays as a fallback when images fail to load.
How to fix it
HTML
<!-- Informative image: describe what it shows -->
<img src="chart.png" alt="Bar chart showing 40% increase in sales from Q1 to Q2 2024">
<!-- Decorative image: use empty alt to hide from screen readers -->
<img src="decorative-border.png" alt="">
<!-- Linked image: describe the link destination -->
<a href="/products"><img src="logo.png" alt="Acme Corp - Go to products"></a>
WordPress
- Open the Media Library and click on an image
- Fill in the Alt Text field on the right panel
- For images in posts, click the image block and enter alt text in the sidebar
React / JSX
<img src={product.image} alt={`${product.name} - ${product.color} variant`} />
Common mistakes
- Using "image" or "photo" as alt text. Describe what the image shows, not what it is.
- Making alt text too long. Keep it under 125 characters for most screen readers.
- Using the filename as alt text (e.g.
alt="IMG_4532.jpg"). - Adding alt text to purely decorative images. Use
alt=""for decorations to avoid cluttering screen reader output.
Test your fix
After adding alt text, audit your site on BeaverCheck to verify all images have appropriate alt attributes.