The Alt Attribute: Making Images Accessible
When you add an image to a web page, not everyone can see it. Some people use screen readers, some have slow internet, and sometimes images just fail to load. That’s where the alt attribute comes in.
In this guide, you’ll learn what the alt attribute is, why it matters, and how to write good alt text even if you’re brand new to coding. We’ll walk through simple examples, explain every part, and give you chances to try things yourself.
What is the alt attribute?
In HTML (the language used to build web pages), images are added with the <img> tag.
The alt attribute (often called alt text) is extra text that describes the image.
Here’s a simple example:
<img src="puppy.jpg" alt="A small brown puppy playing with a red ball" />
Let’s break this down:
imgis the tag that tells the browser, “This is an image.”src(short for source) tells the browser where to find the image file.altprovides alternative text that describes the image.
If someone can’t see the image, their screen reader will read the alt text aloud. If the image doesn’t load, the alt text will show in its place.
Why the alt attribute is important
The alt attribute matters for several reasons:
Accessibility: People who are blind or have low vision often use screen readers. These tools read the alt text so users know what the image is about.
When images break: If the image file is missing or the connection is slow, the browser can show the alt text instead.
SEO (Search Engine Optimization): Search engines can’t “see” images. They rely on alt text to understand what’s in the image, which can help your page appear in relevant searches.
Using alt text is one of the easiest ways to make your site more inclusive and professional.
Basic image with alt text
Let’s start with a basic HTML page that includes one image. Don’t worry if you’ve never written HTML before; we’ll go slowly.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First Accessible Image</title>
</head>
<body>
<!-- This is an image of a coffee cup -->
<img src="coffee.jpg" alt="A white coffee cup on a wooden table" />
</body>
</html>
What each part does:
<!DOCTYPE html>tells the browser this is an HTML5 document.<html>wraps all the content on the page.<head>contains page settings (like the title and character set).<body>holds what visitors actually see: text, images, etc.<img src="coffee.jpg" ... />displays the image.alt="A white coffee cup on a wooden table"describes the image.
Expected result:
If coffee.jpg is in the same folder as this HTML file, you’ll see the coffee image.
If it’s missing, you might see a broken image icon and the alt text.
Try it yourself
- Create a new file called
index.html. - Paste the code above into it.
- Save the file.
- Double-click it to open it in your browser.
- Try changing the alt text and reloading the page.
You won’t “see” the alt text if the image loads, but it’s there, ready to help users who need it.
How to write good alt text
Good alt text should be:
- Accurate: Describe what’s really in the image.
- Relevant: Focus on what matters in the context of the page.
- Concise: Usually a short phrase or one short sentence.
Example 1: Descriptive alt text
<!-- Bad: too vague -->
<img src="chart-sales.png" alt="Image" />
<!-- Better: explains what the image shows -->
<img src="chart-sales.png" alt="Bar chart showing monthly sales rising from January to June" />
In the “bad” example, alt="Image" is useless.
It tells the user nothing.
In the “better” example, the alt text explains what the chart shows: sales going up over time. This gives real value to someone who can’t see the chart.
When to use empty alt text
Sometimes an image is purely decorative. That means the image doesn’t add any important information; it just makes the page look nicer.
In that case, you should use empty alt text:
<img src="decorative-line.png" alt="" />
When alt="" (two quotes with nothing between), screen readers know they can skip the image.
This stops users from hearing unhelpful descriptions like “decorative line” over and over.
Rule of thumb:
- If the image adds meaning or information → Write alt text.
- If the image is purely decorative → Use
alt="".
Step-by-step: Improving a small page with alt text
Let’s improve a tiny web page that has several images but no alt text. We’ll start with the “before” version, then fix it.
Before: Images without alt text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Our Team</title>
</head>
<body>
<h1>Meet Our Team</h1>
<!-- Team member photos, but no alt text yet -->
<img src="anna.jpg" />
<p>Anna – Project Manager</p>
<img src="james.jpg" />
<p>James – Lead Developer</p>
<!-- Decorative logo divider -->
<img src="divider.png" />
</body>
</html>
This page might look fine, but it’s not friendly to screen reader users. They’ll just hear “image, image, image” with no description.
After: Images with thoughtful alt text
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Our Team</title>
</head>
<body>
<h1>Meet Our Team</h1>
<!-- Anna's photo with descriptive alt text -->
<img src="anna.jpg" alt="Anna, smiling, wearing a blue blazer" />
<p>Anna – Project Manager</p>
<!-- James's photo with descriptive alt text -->
<img src="james.jpg" alt="James sitting at a desk with a laptop" />
<p>James – Lead Developer</p>
<!-- Decorative divider; no important meaning, so empty alt -->
<img src="divider.png" alt="" />
</body>
</html>
Now screen reader users get helpful descriptions of Anna and James. The decorative divider is skipped, so it doesn’t clutter the experience.
Try it yourself
- Copy the “before” code into your
index.htmlfile. - Open it in your browser.
- Then replace it with the “after” code and reload the page.
- To simulate broken images, change one of the
srcvalues to something that doesn’t exist (likeanna2.jpg). You’ll see the alt text instead of the image.
This simple experiment shows how alt text provides a backup when images fail.
Alt text for functional images (like buttons)
Some images are actually buttons or links. For example, a “Search” icon or a “Download” button. In those cases, the alt text should describe the action, not just the picture.
<!-- Image that works as a button to submit a search -->
<input type="image" src="search-icon.png" alt="Search" />
<!-- Image that works as a download link -->
<a href="resume.pdf">
<img src="download-icon.png" alt="Download resume" />
</a>
Here:
alt="Search"tells the user what the button does.alt="Download resume"explains the action of the link.
If you just wrote alt="Magnifying glass", that would describe the picture but not the purpose.
For interactive images, always focus on what happens when you click.
Common mistakes to avoid
As you practice writing alt text, watch out for these pitfalls:
Repeating “image of” or “picture of”
- Screen readers already announce it’s an image.
- Instead of
alt="Image of a cat", just writealt="Black cat lying on a sofa".
Stuffing keywords
- Don’t write:
alt="best cheap shoes buy online discount". - This is confusing and not helpful to real users.
- Don’t write:
Leaving out alt text altogether
- Every
<img>must have an alt attribute. - Use descriptive text, or
alt=""if it’s decorative.
- Every
Quick practice ideas
Here are some “Try it yourself” prompts:
Describe a product photo
- Imagine an image of a red running shoe.
- Write alt text that would help someone decide if they want to buy it.
Describe a landscape
- Think of a photo of a beach at sunset.
- What would you write so someone can picture it in their mind?
Decorative vs. meaningful
- Look at a random web page.
- For each image, ask: “Does this give information or is it just decoration?”
- If it’s decoration, imagine using
alt="".
These small exercises build your “alt text muscle” over time.
Recap and what’s next
You’ve learned that the alt attribute is a simple but powerful tool that:
- Makes your website more accessible to people using screen readers
- Provides useful backup text when images fail to load
- Helps search engines understand your images
To use alt text well:
- Always add an
altattribute to every<img>tag - Describe the image briefly and accurately
- Use
alt=""for purely decorative images - Focus on the action for images that act as buttons or links
Your next step is to look at any web page you control (or even a practice page) and improve the alt text for each image. Every time you do this, you make the web a little more welcoming and usable for everyone. That’s a big win, and you’re absolutely capable of it.
