How to make image accessible in html

HtmlHow-ToBeginner · 3 min read

How to Make Images Accessible in HTML: Simple Guide

To make an image accessible in HTML, always use the alt attribute inside the <img> tag to provide descriptive text. This helps screen readers describe the image to users who cannot see it.

📐

Syntax

The basic syntax for an accessible image uses the <img> tag with the src attribute for the image URL and the alt attribute for alternative text. The alt text should clearly describe the image content or function.

src: URL of the image file.
alt: Text description for screen readers.

html

<img src="image.jpg" alt="Description of the image">

Output

Displays the image with accessible description for screen readers.

💻

Example

This example shows an image of a smiling cat with an appropriate alt text. Screen readers will read the alt text aloud, helping visually impaired users understand the image.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Image Example</title>
</head>
<body>
  <img src="https://example.com/cat.jpg" alt="A smiling orange cat sitting on a windowsill">
</body>
</html>

Output

The browser shows the cat image. Screen readers read: 'A smiling orange cat sitting on a windowsill'.

⚠️

Common Pitfalls

Common mistakes include leaving the alt attribute empty or missing, which makes the image inaccessible to screen readers. Another error is using vague or unhelpful alt text like "image" or "photo".

For decorative images that do not add meaning, use an empty alt attribute (alt="") so screen readers skip them.

html

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

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

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

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

Output

Screen readers skip decorative images with empty alt and read descriptive alt text for meaningful images.

📊

Quick Reference

Attribute	Purpose	Example
src	URL of the image file	src="cat.jpg"
alt	Text description for accessibility	alt="A smiling cat"
width	Image width in pixels (optional)	width="300"
height	Image height in pixels (optional)	height="200"

✅

Key Takeaways

Always include a meaningful alt attribute to describe images for screen readers.

Use empty alt text (alt="") for purely decorative images to avoid confusion.

Avoid vague alt text like "image" or "photo"; be specific and clear.

The alt attribute is required for accessibility and improves SEO.

Test your images with screen readers to ensure descriptions make sense.