For visitors with visual impairments, alt text is essential. It allows screen readers to describe what's in an image, making your content accessible to everyone.
But writing good alt text isn't just about accessibility; it's a hallmark of high-quality content. The good news is that with a few practical tips, it becomes much easier.
Alt Text vs. Caption: What's the Difference?
These two are often confused, but they serve distinct purposes:
- Alt Text: Describes the content and function of an image. It’s invisible to most users but is read aloud by screen readers and displayed if an image fails to load.
- Caption: Provides additional context or credit, such as names, locations, or the photographer's name. It is always visible to all users, typically below the image.
Here’s an example to make the difference clear:
Alt text: "A middle-aged man with a mustache looks at the camera. He is wearing a suit and tie and is standing in front of a bookshelf."
Caption: "Albert Einstein. This photo was taken in 1916 when Einstein visited his friend Paul Ehrenfest in Leiden."
Practical Tips for Better Alt Text
The Golden Rules
- No alt text is better than bad alt text. If an image is purely decorative, it's best to leave the alt text empty.
- Keep it concise. One or two sentences are usually enough. Don't overcomplicate it.
- Use the same language as the main content on the page.
The Do's and Don'ts
Do:
- Describe the most important element of the image first.
- Include any text that appears within the image.
- End with a period. This signals to screen readers that the description is complete.
- For functional images (like a logo that links to the homepage), describe the action (e.g., "Link to the University homepage").
Don't:
- Start with "Image of" or "Photo of." Screen readers already announce it's an image. (The exception is for specific formats like paintings, illustrations, or screenshots).
- Repeat the caption or surrounding text.
- Add alt text to purely decorative images (see below).
When to Use Empty Alt Text
Some images don't convey information and should have an empty alt text attribute (alt=""). This applies to:
- Decorative images that add no new information (e.g., a stock photo used for visual appeal).
- Images used for visual styling, like a background pattern or a divider line.
- Images where the information is already fully described in the surrounding text.
Your Pre-Publication Checklist
Before you hit publish, quickly run through these questions:
- Does the description start with the most important information?
- Is it understandable to someone who cannot see the image?
- Does it repeat information from the caption or body text?
- Does it end with a period?
- Is this a decorative image that should have empty alt text (alt="")?
Want to Learn More?
There are many excellent resources online. Try searching for "alt text best practices" or "writing effective alt text" for more examples and in-depth guides. Writing great alt text is a skill that develops with practice—and your audience will thank you for it.
Log in om een reactie achter te laten of registeer je.