Accessibility isn’t just about rules. It’s about making sure everyone, including people who use screen readers, can actually understand your content. When your images and SVGs are accessible, your site becomes easier for people to navigate — and search engines appreciate it too.
ALT Text for Accessible Images
ALT text is a short explanation of an image. Screen readers rely on it to describe what the picture shows and why it’s there.
How to Add ALT Text
<img src="cat.jpg" alt="Gray cat sleeping on a windowsill">Tips for Writing Effective ALT Text
- Keep it short and meaningful.
- Explain the purpose of the image in context.
- Mention any important text inside the image.
- Use clear, everyday language.
- Update the ALT text when the image changes.
- CAPTCHA should include an accessible audio option.
Common Mistakes in Image Accessibility
- Starting with “image of.” Screen readers already know that.
- Writing ALT text for decorative images instead of using
alt="". - Repeating the caption inside the ALT text.
- Using vague descriptions like “company logo” instead of naming it.
- Adding unnecessary wording or long poetic descriptions that don’t help.
How to Make SVGs Accessible
- Add a <title> and <desc> inside the
<svg>element. - Use
aria-labelledbyoraria-label. - Don’t hide meaningful SVGs in CSS backgrounds.
- Use
role="presentation"for decorative SVGs.
Why Graphical Links Need Careful ALT Text
Graphical links are images that also function as links. For screen reader users, this can turn messy very quickly if the ALT text isn’t handled correctly.
When an image is inside a link, the ALT text becomes the link’s accessible name. If you add extra details to the ALT text, the screen reader ends up reading two different pieces of information:
- the link purpose
- the extra description written inside the ALT
This creates confusion because link text should always communicate the purpose on its own.
The rule is simple:
Describe the image only if the visual content matters, but never overload the ALT text with extra explanations. The link text should carry the meaning, not the ALT description.
This avoids double announcements and makes the experience much smoother.
My Personal Experience as a Screen Reader User
As someone who actively uses a screen reader and works professionally in accessibility, I’ve experienced these issues repeatedly. Sometimes ALT text is too long, reading out every unnecessary detail in one breath. Other times it’s extremely short or misses the entire purpose of the image.
This is where real user experience matters. Automated tools and AI often generate descriptions that look helpful on paper but fall apart when actually read aloud. That’s why accessibility testing with real assistive technology users is essential.
Through my services, I help teams understand not just WCAG, but how these choices affect real people navigating the web. Clear, purposeful ALT text changes everything — and hearing it firsthand makes all the difference.