HTML · Accessibility

What is Alt Text?

Learn how to write effective alternative text for images

Find videos you like?

Save to resource drawer for future reference!

Alt Text Best Practices

Examples of good and bad alt text for different image types

Alt Text Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alt Text Best Practices</title>
  </head>
  <body>
    <div class="container">
      <h1>🖼️ Alt Text Best Practices</h1>
      <!-- Informative Images -->
      <div class="category-section">
        <h2>1. Informative Images</h2>
        <p style="color: #6b7280; margin-bottom: 20px;">
          Images that convey important information need descriptive alt text.
        </p>
        <div class="comparison">
          <div class="example-card bad">
            <h3>❌ Bad Alt Text</h3>
            <div class="image-container">
              <div class="placeholder-img">📊</div>
              <img src="chart.png" alt="image" style="display: none;">
            </div>
            <div class="code-display">
              &lt;img src="chart.png" alt="image"&gt;
            </div>
            <p class="explanation">
              "image" tells screen reader users nothing useful. What does the chart show?
            </p>
          </div>
          <div class="example-card good">
            <h3>✅ Good Alt Text</h3>
            <div class="image-container">
              <div class="placeholder-img">📊</div>
              <img src="chart.png" alt="Bar chart showing 50% increase in sales from 2023 to 2024" style="display: none;">
            </div>
            <div class="code-display">
              &lt;img src="chart.png"
              alt="Bar chart showing 50% increase
              in sales from 2023 to 2024"&gt;
            </div>
            <p class="explanation">
              Describes what the chart conveys. Screen reader users get the same information as sighted users.
            </p>
          </div>
        </div>
      </div>
      <!-- Decorative Images -->
      <div class="category-section">
        <h2>2. Decorative Images</h2>
        <p style="color: #6b7280; margin-bottom: 20px;">
          Images that don't add information should have empty alt attributes.
        </p>
        <div class="comparison">
          <div class="example-card bad">
            <h3>❌ Bad</h3>
            <div class="image-container">
              <div class="placeholder-img">⭐</div>
              <h4 style="margin-top: 10px;">Premium Features</h4>
            </div>
            <div class="code-display">
              &lt;img src="star.png" alt="star icon"&gt;
              &lt;h2&gt;Premium Features&lt;/h2&gt;
            </div>
            <p class="explanation">
              Screen readers announce "star icon" and "Premium Features" - redundant!
            </p>
          </div>
          <div class="example-card good">
            <h3>✅ Good</h3>
            <div class="image-container">
              <div class="placeholder-img">⭐</div>
              <h4 style="margin-top: 10px;">Premium Features</h4>
            </div>
            <div class="code-display">
              &lt;img src="star.png" alt=""&gt;
              &lt;h2&gt;Premium Features&lt;/h2&gt;
            </div>
            <p class="explanation">
              Empty alt="" tells screen readers to skip the image. Clean and concise!
            </p>
          </div>
        </div>
      </div>
      <!-- Functional Images -->
      <div class="category-section">
        <h2>3. Functional Images (Buttons/Links)</h2>
        <p style="color: #6b7280; margin-bottom: 20px;">
          Images that are clickable should describe the action, not the image.
        </p>
        <div class="comparison">
          <div class="example-card bad">
            <h3>❌ Bad</h3>
            <div class="image-container">
              <a href="#" style="display: inline-block;">
                <div class="placeholder-img" style="width: 60px; height: 60px; font-size: 2rem;">🔍</div>
              </a>
            </div>
            <div class="code-display">
              &lt;a href="/search"&gt;
              &lt;img src="icon.png" alt="magnifying glass"&gt;
              &lt;/a&gt;
            </div>
            <p class="explanation">
              "Magnifying glass" describes the image, not what it does. Confusing!
            </p>
          </div>
          <div class="example-card good">
            <h3>✅ Good</h3>
            <div class="image-container">
              <a href="#" style="display: inline-block;">
                <div class="placeholder-img" style="width: 60px; height: 60px; font-size: 2rem;">🔍</div>
              </a>
            </div>
            <div class="code-display">
              &lt;a href="/search"&gt;
              &lt;img src="icon.png" alt="Search"&gt;
              &lt;/a&gt;
            </div>
            <p class="explanation">
              Describes the action. Screen reader announces "Search, link" - perfect!
            </p>
          </div>
        </div>
      </div>
      <div style="background: #fef3c7; padding: 25px; border-radius: 12px; margin-top: 40px; border-left: 4px solid #f59e0b;">
        <h3 style="color: #78350f; margin-bottom: 15px;">⚡ Quick Alt Text Rules</h3>
        <ul style="list-style: none; line-height: 2; color: #92400e;">
          <li>✓ Describe the content/function, not the image</li>
          <li>✓ Keep it concise (150 characters or less)</li>
          <li>✓ Don't start with "Image of" or "Picture of"</li>
          <li>✓ Use alt="" for decorative images</li>
          <li>✓ Never leave alt attribute empty (no alt="")</li>
          <li>✓ For complex images, provide long description nearby</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Four Types of Images

How to handle alt text for different purposes

📊 Informative Images

Convey important content or information

<img src="chart.png" alt="Sales increased 50% from Q1 to Q2">

🎨 Decorative Images

Purely visual, don't add information (borders, spacers, design elements)

<img src="decoration.png" alt="">

🔘 Functional Images

Clickable (buttons, links) - describe the action, not the image

<a href="/cart"><img src="cart.png" alt="View shopping cart"></a>

📝 Complex Images

Detailed (infographics, diagrams) - use short alt + long description

<img src="diagram.png" alt="Website architecture" aria-describedby="desc"> <p id="desc">Detailed description...</p>

Writing Great Alt Text

Guidelines for creating effective descriptions

✅ DO

• Be specific and concise
• Describe the content/function
• Keep under 150 characters
• Use empty alt="" for decorative
• Include text in images
• Consider context

❌ DON'T

• Start with "Image of..."
• Be vague ("picture", "graphic")
• Omit alt attribute entirely
• Use filename as alt text
• Make it too long (>150 chars)
• Include redundant info

Alt Text Best Practices

Be concise - Aim for under 150 characters (screen readers may cut off)
Describe content, not appearance - "Dog running" not "Photo of dog"
Include text in images - If image contains text, include it in alt
Context matters - Same image may need different alt text in different contexts
Empty for decorative - Use alt="" not missing alt
Describe function for links - "Search" not "magnifying glass icon"
Don't repeat nearby text - If caption says it, alt text can be shorter
Test with screen reader - Hear how it sounds

Common Alt Text Mistakes

Missing alt entirely - <img src="photo.jpg"> with no alt
Using filename - alt="IMG_1234.jpg"
"Image of" prefix - Screen readers already say "image"
Too verbose - Paragraphs of text in alt attribute
Generic text - alt="image", alt="photo", alt="picture"
Wrong type - Describing decorative images or not describing informative ones
Repeating caption - Alt text identical to visible caption
Not updating - Alt text doesn't match updated image

Handling Complex Images

For complex images like infographics, charts, or diagrams:

Use short alt text as summary
Provide detailed description in text below or via aria-describedby
Consider providing data table equivalent for charts
Use longdesc attribute (deprecated but still supported)
Link to separate page with full description if needed

Previous Topic

Skip Links

Skip to content links for keyboard users.

Next Topic

Accessible Forms

Form accessibility with labels, fieldsets, and error messages.

Ask a Question

Have a question about Alt Text Best Practices? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Accessibility

What is Alt Text?

Learn how to write effective alternative text for images

Find videos you like?

Save to resource drawer for future reference!

Alt Text Best Practices

Examples of good and bad alt text for different image types

Alt Text Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alt Text Best Practices</title>
  </head>
  <body>
    <div class="container">
      <h1>🖼️ Alt Text Best Practices</h1>
      <!-- Informative Images -->
      <div class="category-section">
        <h2>1. Informative Images</h2>
        <p style="color: #6b7280; margin-bottom: 20px;">
          Images that convey important information need descriptive alt text.
        </p>
        <div class="comparison">
          <div class="example-card bad">
            <h3>❌ Bad Alt Text</h3>
            <div class="image-container">
              <div class="placeholder-img">📊</div>
              <img src="chart.png" alt="image" style="display: none;">
            </div>
            <div class="code-display">
              &lt;img src="chart.png" alt="image"&gt;
            </div>
            <p class="explanation">
              "image" tells screen reader users nothing useful. What does the chart show?
            </p>
          </div>
          <div class="example-card good">
            <h3>✅ Good Alt Text</h3>
            <div class="image-container">
              <div class="placeholder-img">📊</div>
              <img src="chart.png" alt="Bar chart showing 50% increase in sales from 2023 to 2024" style="display: none;">
            </div>
            <div class="code-display">
              &lt;img src="chart.png"
              alt="Bar chart showing 50% increase
              in sales from 2023 to 2024"&gt;
            </div>
            <p class="explanation">
              Describes what the chart conveys. Screen reader users get the same information as sighted users.
            </p>
          </div>
        </div>
      </div>
      <!-- Decorative Images -->
      <div class="category-section">
        <h2>2. Decorative Images</h2>
        <p style="color: #6b7280; margin-bottom: 20px;">
          Images that don't add information should have empty alt attributes.
        </p>
        <div class="comparison">
          <div class="example-card bad">
            <h3>❌ Bad</h3>
            <div class="image-container">
              <div class="placeholder-img">⭐</div>
              <h4 style="margin-top: 10px;">Premium Features</h4>
            </div>
            <div class="code-display">
              &lt;img src="star.png" alt="star icon"&gt;
              &lt;h2&gt;Premium Features&lt;/h2&gt;
            </div>
            <p class="explanation">
              Screen readers announce "star icon" and "Premium Features" - redundant!
            </p>
          </div>
          <div class="example-card good">
            <h3>✅ Good</h3>
            <div class="image-container">
              <div class="placeholder-img">⭐</div>
              <h4 style="margin-top: 10px;">Premium Features</h4>
            </div>
            <div class="code-display">
              &lt;img src="star.png" alt=""&gt;
              &lt;h2&gt;Premium Features&lt;/h2&gt;
            </div>
            <p class="explanation">
              Empty alt="" tells screen readers to skip the image. Clean and concise!
            </p>
          </div>
        </div>
      </div>
      <!-- Functional Images -->
      <div class="category-section">
        <h2>3. Functional Images (Buttons/Links)</h2>
        <p style="color: #6b7280; margin-bottom: 20px;">
          Images that are clickable should describe the action, not the image.
        </p>
        <div class="comparison">
          <div class="example-card bad">
            <h3>❌ Bad</h3>
            <div class="image-container">
              <a href="#" style="display: inline-block;">
                <div class="placeholder-img" style="width: 60px; height: 60px; font-size: 2rem;">🔍</div>
              </a>
            </div>
            <div class="code-display">
              &lt;a href="/search"&gt;
              &lt;img src="icon.png" alt="magnifying glass"&gt;
              &lt;/a&gt;
            </div>
            <p class="explanation">
              "Magnifying glass" describes the image, not what it does. Confusing!
            </p>
          </div>
          <div class="example-card good">
            <h3>✅ Good</h3>
            <div class="image-container">
              <a href="#" style="display: inline-block;">
                <div class="placeholder-img" style="width: 60px; height: 60px; font-size: 2rem;">🔍</div>
              </a>
            </div>
            <div class="code-display">
              &lt;a href="/search"&gt;
              &lt;img src="icon.png" alt="Search"&gt;
              &lt;/a&gt;
            </div>
            <p class="explanation">
              Describes the action. Screen reader announces "Search, link" - perfect!
            </p>
          </div>
        </div>
      </div>
      <div style="background: #fef3c7; padding: 25px; border-radius: 12px; margin-top: 40px; border-left: 4px solid #f59e0b;">
        <h3 style="color: #78350f; margin-bottom: 15px;">⚡ Quick Alt Text Rules</h3>
        <ul style="list-style: none; line-height: 2; color: #92400e;">
          <li>✓ Describe the content/function, not the image</li>
          <li>✓ Keep it concise (150 characters or less)</li>
          <li>✓ Don't start with "Image of" or "Picture of"</li>
          <li>✓ Use alt="" for decorative images</li>
          <li>✓ Never leave alt attribute empty (no alt="")</li>
          <li>✓ For complex images, provide long description nearby</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Four Types of Images

How to handle alt text for different purposes

📊 Informative Images

Convey important content or information

<img src="chart.png" alt="Sales increased 50% from Q1 to Q2">

🎨 Decorative Images

Purely visual, don't add information (borders, spacers, design elements)

<img src="decoration.png" alt="">

🔘 Functional Images

Clickable (buttons, links) - describe the action, not the image

<a href="/cart"><img src="cart.png" alt="View shopping cart"></a>

📝 Complex Images

Detailed (infographics, diagrams) - use short alt + long description

<img src="diagram.png" alt="Website architecture" aria-describedby="desc"> <p id="desc">Detailed description...</p>

Writing Great Alt Text

Guidelines for creating effective descriptions

✅ DO

• Be specific and concise
• Describe the content/function
• Keep under 150 characters
• Use empty alt="" for decorative
• Include text in images
• Consider context

❌ DON'T

• Start with "Image of..."
• Be vague ("picture", "graphic")
• Omit alt attribute entirely
• Use filename as alt text
• Make it too long (>150 chars)
• Include redundant info

Alt Text Best Practices

Be concise - Aim for under 150 characters (screen readers may cut off)
Describe content, not appearance - "Dog running" not "Photo of dog"
Include text in images - If image contains text, include it in alt
Context matters - Same image may need different alt text in different contexts
Empty for decorative - Use alt="" not missing alt
Describe function for links - "Search" not "magnifying glass icon"
Don't repeat nearby text - If caption says it, alt text can be shorter
Test with screen reader - Hear how it sounds

Common Alt Text Mistakes

Missing alt entirely - <img src="photo.jpg"> with no alt
Using filename - alt="IMG_1234.jpg"
"Image of" prefix - Screen readers already say "image"
Too verbose - Paragraphs of text in alt attribute
Generic text - alt="image", alt="photo", alt="picture"
Wrong type - Describing decorative images or not describing informative ones
Repeating caption - Alt text identical to visible caption
Not updating - Alt text doesn't match updated image

Handling Complex Images

For complex images like infographics, charts, or diagrams:

Use short alt text as summary
Provide detailed description in text below or via aria-describedby
Consider providing data table equivalent for charts
Use longdesc attribute (deprecated but still supported)
Link to separate page with full description if needed

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Skip Links

Accessible Forms

HTML Code Editor

Building Your Learning Module...

What is Alt Text?

Alt Text Examples

📊 Informative Images

🎨 Decorative Images

🔘 Functional Images

📝 Complex Images

✅ DO

❌ DON'T

Alt Text Best Practices

Common Alt Text Mistakes

Handling Complex Images

Skip Links

Accessible Forms

HTML Code Editor

What is Alt Text?

Alt Text Examples

📊 Informative Images

🎨 Decorative Images

🔘 Functional Images

📝 Complex Images

✅ DO

❌ DON'T

Alt Text Best Practices

Common Alt Text Mistakes

Handling Complex Images