Learn how to write effective `alt` attributes for images to improve accessibility for screen reader users and enhance search engine optimization.
What it is
The alt attribute (alternative text) provides a text description of an image. It serves two primary purposes: it allows screen readers to describe visual content to users with visual impairments, and it helps search engines understand the context of the image. Think of alt text as a caption that describes what is happening in the image, not just what the file is named.
Why it matters
- Accessibility: Screen readers cannot "see" images; they rely on alt text to convey meaning to blind or low-vision users.
- SEO: Search engines use alt text to index images correctly, potentially driving traffic through image searches.
- Context Preservation: If an image fails to load due to network issues, the alt text appears in its place, ensuring the user still understands the content.
- Compliance: Proper alt text is required by web accessibility standards like WCAG (Web Content Accessibility Guidelines).
Syntax or steps
Add the alt attribute directly inside the opening <img> tag. The value must be a string enclosed in quotes.
- Identify the purpose of the image (informative, decorative, or functional).
- If informative, write a concise description of the content or function.
- If decorative, use an empty string (
alt="") so screen readers skip it. - Avoid starting with "Image of..." or "Picture of..." as screen readers announce this automatically.
Example
<!-- Informative Image -->
<img src="chart-sales-q3.png" alt="Bar chart showing sales increased by 15% in Q3 compared to Q2">
<!-- Decorative Image -->
<img src="divider-line.png" alt="" role="presentation">
<!-- Functional Image (Link) -->
<a href="/contact">
<img src="email-icon.png" alt="Contact us via email">
</a>In the first example, the alt text explains the data trend rather than just naming the file. In the second, the empty alt text tells assistive technology to ignore the decorative divider. In the third, the alt text describes the action the link performs.
Common mistakes
- Redundancy: Writing "Image of a dog" instead of just "Dog." Screen readers already announce that it is an image.
- Keyword Stuffing: Overloading alt text with SEO keywords makes it unreadable for humans and penalized by search engines.
- Missing Alt Text: Omitting the attribute entirely causes some browsers to display the filename, which is confusing and unhelpful.
- Describing the File Name: Using "photo_001.jpg" as alt text provides no semantic value.
When to use it
Every image requires an alt attribute. The decision lies in whether the content should be descriptive or empty.
| Image Type | Alt Text Strategy | Example |
|---|---|---|
| Informative | Describe the content/function | alt="Sunset over the ocean" |
| Decorative | Empty string | alt="" |
| Complex Data | Brief summary + longdesc or nearby text | alt="Sales graph (see table below)" |
Practice
Guided Exercise: Write alt text for an image of a red bicycle leaning against a brick wall. Hint: Focus on the subject and setting without saying "image of."
Challenge: How would you handle an image that contains critical text information, such as a menu? Solution Hint: Do not rely solely on alt text for large amounts of text. Provide the text in HTML format near the image or use a detailed description.
Quick check
Question: Should you include the word "image" in your alt text?
Answer: No. Screen readers automatically announce that an element is an image, so adding "image of" creates redundancy.
Summary
Effective alt text balances brevity with clarity, ensuring that both human users with disabilities and search engine algorithms understand the visual content. Always ask: "If I couldn't see this image, what information would I need to know?"