Alternative text for images (alt attribute)

What is Image Alternative Text

Image alternative text refers to the alt attribute in HTML's <img> tag, which provides a textual description when the image cannot be displayed. It becomes particularly important for users relying on screen readers or experiencing poor network connections. Alternative text not only enhances website accessibility but also helps search engines understand image content.

<img src="cat.jpg" alt="An orange cat napping in sunlight">

Why Alternative Text is Needed

The core value of alternative text lies in ensuring information is available to all users. Visually impaired users depend on screen readers to access web content - without the alt attribute, they miss the information conveyed by images. From an SEO perspective, search engine crawlers cannot "see" images but can read alt text to understand image content.

Typical scenarios include:

• When browsers disable image display
• When image files are corrupted or paths are incorrect
• When mobile network signals are weak causing loading failures
• When users employ text-mode browsers

How to Write Effective Alternative Text

Good alternative text should concisely and accurately describe the image's function or content, rather than simply stuffing keywords. For decorative images, an empty alt attribute (alt="") can be used, causing screen readers to skip the image.

Functional image examples:

<!-- Search icon -->
<img src="search-icon.png" alt="Search" width="20" height="20">

<!-- Button image -->
<img src="submit-btn.png" alt="Submit form">

Content image examples:

<!-- Product image -->
<img src="product-123.jpg" alt="Black leather office chair with adjustable armrests">

<!-- Infographic -->
<img src="chart.png" alt="2023 quarterly sales trend chart: Q1 1.2M, Q2 1.5M, Q3 1.8M, Q4 2.1M">

Common Mistakes and Best Practices

Many developers make these common errors with alt attributes:

1. Redundant descriptions: Avoid using redundant words like "image/picture/icon"

   <!-- Bad example -->
   <img src="logo.png" alt="Company logo image">
   
   <!-- Good example -->
   <img src="logo.png" alt="XYZ company logo">
   

2. Keyword stuffing: Don't overuse keywords for SEO

   <!-- Bad example -->
   <img src="shoes.jpg" alt="sneakers running shoes basketball shoes Nike Adidas">
   
   <!-- Good example -->
   <img src="shoes.jpg" alt="Nike Air Max red running shoes">
   

3. Ignoring complex images: For charts, flowcharts etc., provide detailed descriptions beyond alt text

   <img src="org-chart.png" alt="Company organizational chart">
   <a href="org-chart-desc.html">View detailed organizational description</a>
   

Handling Special Cases

Decorative images should use empty alt attributes so screen readers ignore them:

<img src="divider.png" alt="" role="presentation">

Images in links should describe the link purpose rather than the image itself:

<a href="products.html">
  <img src="shop-now.png" alt="Browse our products">
</a>

Image maps should provide alt text for each area:

<img src="world-map.png" usemap="#worldmap" alt="World map">
<map name="worldmap">
  <area shape="rect" coords="0,0,100,100" href="europe.html" alt="Europe region">
  <area shape="rect" coords="100,0,200,100" href="asia.html" alt="Asia region">
</map>

Advanced Techniques and ARIA

For more complex scenarios, combine with ARIA attributes to enhance accessibility:

<img src="avatar.png" 
     alt="User avatar"
     aria-describedby="avatar-desc">
<p id="avatar-desc">This is member John Doe's avatar showing him wearing a blue baseball cap</p>

When images function as buttons, explicitly declare their role:

<img src="close.png" 
     alt="Close window"
     role="button"
     tabindex="0">

Testing and Validation

Methods to ensure alt text effectiveness:

1. Disable browser image display to check if alternative text is appropriate
2. Test with screen readers (NVDA, VoiceOver)
3. Use accessibility evaluation tools like WAVE
4. Check for missing alt attributes during HTML validation

// Simple alt attribute check script
document.querySelectorAll('img:not([alt])').forEach(img => {
  console.warn('Image missing alt attribute:', img);
});

Alternative Text Strategies for Different Scenarios

E-commerce websites:

<img src="product-456.jpg" 
     alt="Wireless Bluetooth headphones, black, with charging case">

News websites:

<img src="protest.jpg" 
     alt="Environmental activists holding 'Save Our Planet' signs in front of city hall">

Social media:

<img src="user-upload.jpg" 
     alt="User uploaded image: Beach at sunset with several people walking">

Educational websites:

<img src="water-cycle.png" 
     alt="Water cycle diagram: evaporation, condensation, precipitation, runoff">

Internationalization Considerations

For multilingual websites, translate alt text accordingly:

<!-- English version -->
<img src="icon.png" alt="Print this page" lang="en">

<!-- Chinese version -->
<img src="icon.png" alt="打印本页" lang="zh">

Performance and Alternative Text

While alt text itself doesn't impact performance, note:

1. Avoid placing large blocks of text in alt as it increases HTML file size
2. For lazy-loaded images, ensure alt text is immediately available
3. Different versions of responsive images can use the same alt text

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="City skyline night view">
</picture>