HtmlHow-ToBeginner · 3 min read

How to Use Alt Text Properly in HTML for Accessibility

Use the alt attribute inside the <img> tag to provide a short, clear description of the image's content or function. This helps screen readers and improves accessibility for users who cannot see images.

📐

Syntax

The alt attribute is added inside the <img> tag to describe the image. It should be a concise text that explains what the image shows or its purpose.

<img src="image.jpg" alt="Description here">: Basic syntax
src: URL or path to the image file
alt: Text describing the image for accessibility

html

<img src="example.jpg" alt="A smiling dog playing in the park">

Output

Displays an image of a smiling dog playing in the park (if example.jpg exists). Screen readers read: 'A smiling dog playing in the park'.

💻

Example

This example shows how to use alt text to describe an image of a mountain landscape. The alt text helps users who cannot see the image understand what it represents.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alt Text Example</title>
</head>
<body>
  <h1>Mountain Landscape</h1>
  <img src="mountain.jpg" alt="Snow-covered mountain under a clear blue sky">
  <p>This image shows a beautiful mountain covered with snow.</p>
</body>
</html>

Output

Page with heading 'Mountain Landscape', an image of a snow-covered mountain (if mountain.jpg exists), and a paragraph describing the image.

⚠️

Common Pitfalls

Common mistakes when using alt text include:

Leaving the alt attribute empty or missing, which makes screen readers skip important information.
Using generic text like "image" or "picture" that doesn't describe the content.
Writing too long or complicated descriptions that confuse users.
Using alt text for decorative images that should have empty alt (alt="") to avoid distraction.

html

<!-- Wrong: Missing alt attribute -->
<img src="logo.png" alt="">

<!-- Wrong: Generic alt text -->
<img src="logo.png" alt="image">

<!-- Right: Clear descriptive alt text -->
<img src="logo.png" alt="Company logo with blue and white colors">

<!-- Right: Decorative image with empty alt -->
<img src="decorative-line.png" alt="">

Output

Images render normally; screen readers read the descriptive alt text or skip decorative images with empty alt.

📊

Quick Reference

Always include alt text for meaningful images.
Keep alt text short and descriptive (a few words or a short sentence).
Use empty alt (alt="") for purely decorative images.
Do not use phrases like "image of" or "picture of" in alt text.
Test with screen readers to ensure alt text is helpful.

✅

Key Takeaways

Always use the alt attribute to describe images for accessibility.

Keep alt text clear, concise, and relevant to the image content.

Use empty alt text for decorative images to avoid confusion.

Avoid vague or generic alt text like 'image' or 'photo'.

Test your alt text with screen readers to ensure it makes sense.