Alt text (alternative text) is a written description of an image that appears in place of the image when it can't be displayed and is read aloud by screen readers. Writing good alt text is one of the most important accessibility practices for making visual content accessible to all users.
What is Alt Text?
Alt text serves multiple purposes:
- Screen readers: Read alt text aloud to describe images to blind or visually impaired users
- Failed images: Displays when image fails to load due to slow connection or broken link
- SEO: Helps search engines understand image content
- Context: Provides meaning when images are disabled
basic-alt-text.html
<!-- Alt text is added using the alt attribute -->
<img src="sunset.jpg" alt="Orange sunset over mountain peaks">
<!-- Every img element MUST have an alt attribute -->
<img src="logo.png" alt="Company Logo">The Golden Rule of Alt Text
Describe what the image conveys, not what the image is.
Focus on the purpose and context of the image, not just its visual appearance. Ask yourself: "What information does this image communicate?" or "Why is this image here?"
When and What to Describe
Informative Images
Images that convey information or meaning need descriptive alt text:
informative-images.html
<!-- Product image -->
<img src="laptop.jpg"
alt="Silver laptop computer with 15-inch display, open at 90-degree angle">
<!-- Chart or graph -->
<img src="sales-chart.jpg"
alt="Bar chart showing sales increased 40% from Q1 to Q2 2024">
<!-- Instructional image -->
<img src="origami-step1.jpg"
alt="Fold the paper in half diagonally to form a triangle">
<!-- Photo with meaningful content -->
<img src="team-photo.jpg"
alt="Five team members standing in office, smiling at camera">Decorative Images
Images that are purely decorative and don't add information should have empty alt text:
decorative-images.html
<!-- Decorative border or divider -->
<img src="decorative-line.png" alt="">
<!-- Background pattern -->
<img src="texture.jpg" alt="" role="presentation">
<!-- Decorative icon when text already conveys the meaning -->
<button>
<img src="save-icon.svg" alt="">
Save Document
</button>
<!-- Spacer image -->
<img src="spacer.gif" alt="">Important: Use alt="" (empty string), not missing alt attribute. This tells screen readers to skip the image.
Functional Images (Links and Buttons)
Images used as links or buttons should describe the action or destination:
functional-images.html
<!-- Image link - describe destination -->
<a href="/products">
<img src="shopping-cart.svg" alt="View shopping cart">
</a>
<!-- Logo link - describe destination -->
<a href="/">
<img src="logo.png" alt="Return to homepage">
</a>
<!-- Social media icon -->
<a href="https://twitter.com/company">
<img src="twitter-icon.svg" alt="Follow us on Twitter">
</a>
<!-- Button with icon -->
<button>
<img src="print-icon.svg" alt="Print this page">
</button>
<!-- Search button -->
<button type="submit">
<img src="search-icon.svg" alt="Search">
</button>Complex Images (Charts, Diagrams)
For complex images like charts or diagrams, provide both short and long descriptions:
complex-images.html
<!-- Short alt + detailed description below -->
<img src="complex-chart.jpg"
alt="Quarterly revenue chart"
aria-describedby="chart-description">
<div id="chart-description">
<h3>Detailed Chart Description</h3>
<p>
The chart shows quarterly revenue for 2024. Q1 revenue was $2.5M,
Q2 increased to $3.2M (28% growth), Q3 reached $3.8M (19% growth),
and Q4 achieved $4.5M (18% growth), representing total annual
growth of 80% year-over-year.
</p>
</div>
<!-- Alternative: Link to long description -->
<img src="org-chart.jpg"
alt="Company organizational chart">
<a href="org-chart-description.html">View detailed chart description</a>Good vs Bad Alt Text Examples
Product Photography
product-examples.html
<!-- ❌ BAD: Too generic -->
<img src="shoe.jpg" alt="Shoe">
<!-- ❌ BAD: States the obvious -->
<img src="shoe.jpg" alt="Image of a shoe">
<!-- ❌ BAD: Keyword stuffing for SEO -->
<img src="shoe.jpg"
alt="Running shoe athletic shoe sports shoe best shoe buy shoe online">
<!-- ✅ GOOD: Specific and descriptive -->
<img src="shoe.jpg"
alt="Nike Air Max 270 running shoe in black and red, side view">
<!-- ✅ GOOD: Includes relevant details -->
<img src="dress.jpg"
alt="Floral print summer dress with short sleeves and knee-length hem">Photos of People
people-examples.html
<!-- ❌ BAD: Vague -->
<img src="ceo.jpg" alt="Person">
<!-- ❌ BAD: Unnecessary details -->
<img src="ceo.jpg"
alt="A person wearing a blue shirt standing against a white wall holding a coffee cup">
<!-- ✅ GOOD: Relevant information -->
<img src="ceo.jpg" alt="Sarah Johnson, CEO">
<!-- ✅ GOOD: Context matters -->
<img src="speaker.jpg"
alt="Dr. Maria Garcia presenting at tech conference">
<!-- ✅ GOOD: Action and context -->
<img src="meeting.jpg"
alt="Team members collaborating around conference table">Icons and Symbols
icon-examples.html
<!-- ❌ BAD: Describes appearance, not function -->
<img src="warning.svg" alt="Red triangle with exclamation mark">
<!-- ✅ GOOD: Describes meaning -->
<img src="warning.svg" alt="Warning">
<!-- ❌ BAD: Redundant with surrounding text -->
<p>
<img src="checkmark.svg" alt="Checkmark">
Payment successful
</p>
<!-- ✅ GOOD: Empty alt since text conveys meaning -->
<p>
<img src="checkmark.svg" alt="">
Payment successful
</p>
<!-- ✅ GOOD: Icon alone, needs description -->
<button>
<img src="download.svg" alt="Download">
</button>Tips for Writing Great Alt Text
1. Be Concise but Descriptive
Aim for 125 characters or less. Screen readers may cut off longer text.
concise-alt.html
<!-- ❌ TOO LONG -->
<img src="park.jpg"
alt="A beautiful scenic photograph taken on a sunny day showing a large park with green grass and many trees with people walking their dogs and children playing on the playground equipment while others are having picnics">
<!-- ✅ CONCISE AND CLEAR -->
<img src="park.jpg"
alt="Families enjoying sunny day at city park with playground">2. Avoid Redundancy
Don't start with "image of" or "picture of" - screen readers already announce it's an image.
avoid-redundancy.html
<!-- ❌ REDUNDANT -->
<img src="cat.jpg" alt="Image of a cat">
<img src="graph.jpg" alt="Photo showing a graph">
<!-- ✅ CLEAN -->
<img src="cat.jpg" alt="Gray tabby cat sleeping on couch">
<img src="graph.jpg" alt="Monthly sales growth chart">3. Consider Context
The same image might need different alt text depending on its context:
context-examples.html
<!-- On a biography page -->
<img src="lincoln.jpg"
alt="Abraham Lincoln, 16th President of the United States">
<!-- In an article about photography -->
<img src="lincoln.jpg"
alt="Black and white portrait photograph by Mathew Brady, 1863">
<!-- In an article about beards -->
<img src="lincoln.jpg"
alt="Abraham Lincoln with his distinctive beard style">4. Avoid Subjective Descriptions
Stick to objective facts unless the emotion is relevant:
objective-alt.html
<!-- ❌ SUBJECTIVE -->
<img src="sunset.jpg" alt="Beautiful breathtaking sunset">
<!-- ✅ OBJECTIVE -->
<img src="sunset.jpg" alt="Orange and pink sunset over ocean">
<!-- ✅ EMOTION IS RELEVANT -->
<img src="child.jpg"
alt="Child laughing while opening birthday present">5. Don't Include File Names or URLs
no-filenames.html
<!-- ❌ BAD -->
<img src="IMG_2847.jpg" alt="IMG_2847.jpg">
<img src="photo.jpg" alt="photo.jpg from website.com">
<!-- ✅ GOOD -->
<img src="IMG_2847.jpg" alt="Golden retriever puppy in grass">Special Cases
Text in Images
When images contain text, include that text in alt attribute:
text-in-images.html
<!-- Quote graphic -->
<img src="quote.jpg"
alt="Quote: The only way to do great work is to love what you do. - Steve Jobs">
<!-- Sign or poster -->
<img src="store-sign.jpg"
alt="Grand Opening - 50% Off Everything - This Weekend Only">
<!-- Text logo -->
<img src="text-logo.png" alt="Acme Corporation">Image Maps
For image maps with clickable regions, provide alt text for each area:
image-maps.html
<img src="world-map.jpg"
alt="World map with clickable continents"
usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100"
href="europe.html" alt="Europe">
<area shape="rect" coords="100,0,200,100"
href="asia.html" alt="Asia">
<area shape="rect" coords="0,100,100,200"
href="africa.html" alt="Africa">
</map>CSS Background Images
Background images can't have alt text. If they're decorative, that's fine. If they convey information, use an img element instead:
background-images.html
<!-- ❌ BAD: Informative image as background -->
<div style="background-image: url('important-chart.jpg');">
</div>
<!-- ✅ GOOD: Use img for informative content -->
<div>
<img src="important-chart.jpg"
alt="Quarterly sales showing 25% increase">
</div>
<!-- ✅ OKAY: Decorative background -->
<div class="hero" style="background-image: url('texture.jpg');">
<h1>Welcome to Our Site</h1>
</div>Testing Your Alt Text
To test if your alt text is effective:
- Read it out loud: Does it make sense without seeing the image?
- Phone test: Describe the image to someone over the phone - that's your alt text
- Turn off images: Disable images in your browser and see if content still makes sense
- Use a screen reader: Test with NVDA, JAWS, or VoiceOver
- Ask yourself: "If I couldn't see this image, would this description help?"
Common Mistakes to Avoid
- Missing alt attribute entirely
- Using alt="image" or alt="photo" (too generic)
- Starting with "image of" or "picture of"
- Making alt text too long (over 125 characters)
- Including file names or extensions
- Keyword stuffing for SEO purposes
- Being too vague or too detailed
- Forgetting to update alt text when images change
- Using same alt text for different images
- Not considering context
Alt Text Checklist
Before publishing, ask:
- ✓ Does every image have an alt attribute?
- ✓ Is the alt text concise (under 125 characters)?
- ✓ Does it describe the image's purpose, not just appearance?
- ✓ Are decorative images marked with alt=""?
- ✓ Do functional images describe the action?
- ✓ Is the alt text appropriate for the context?
- ✓ Did I avoid "image of" or "picture of"?
- ✓ Is it written in clear, simple language?
Key Takeaways
- Every image must have an alt attribute
- Alt text should describe what the image conveys, not what it looks like
- Use empty alt="" for purely decorative images
- Keep alt text concise - aim for 125 characters or less
- For functional images, describe the action or destination
- Consider context when writing alt text
- Avoid starting with "image of" or "picture of"
- Complex images need both short alt and long descriptions
- Test your alt text by reading it without seeing the image
What's Next?
Now that you know how to write effective alt text for images, you can make visual content accessible to all users. In the next lesson, we'll explore color contrast and typography considerations for visual accessibility.