Alt-text
Everything we know about alt-texts, when to use them, and how to craft them.
An alt-text is a description of an image that’s shown to people who can’t see the image. Alt-texts help people with little or no vision who use assistive technologies, people who have turned off images, and search engines.
It might sound obvious, but an alt-text should describe the image in case an image doesn’t display or someone has trouble seeing it. The goal of alt-text is to give the necessary information from the image at a glance. It’s best to include only the necessary information.
| Don’t | Do |
|---|---|
| “People using computers.” | “Man and woman using laptops at a standing table, Illustration.” |
| “Man in a purple shirt and woman in blue pants are typing on laptops and there’s a plant on the floor nearby.” | |
| “Man and woman using computers, illustrated by Jane Doe © 2019.” |
Take context into account. For instance, if the image above is part of a blog post about standing tables, then it’s safer to skip the part about standing tables.
Don’t start alt-texts with things like “Image of” or “Photo of.”. Screen readers add that by default. If it’s a special type of image (like an icon), you can note that at the end.
| Don’t | Do |
|---|---|
| “Image of a rocket.” | “A rocket.” |
| “Illustration of a rocket.” | |
| Photo of a rocket.” | |
| “Icon of a rocket.” | “A rocket, icon.” |
End the alt-text with a period. This makes screen readers pause a bit after the last word in the alt-text, creating a natural pause before the next bit of text.
In most cases you should use an alt-text for images, but there are some exceptions where you should leave the alt-text blank.
If an image does not convey any meaning to the user, leave the alt-text blank.
<div>
<img src="rocket.svg" alt="">
<h2>…</h2>
<p>…</p>
</div>
Improve efficiency and ship better code
There’s a reason the world’s largest developer teams rely on Stack Overflow Enterprise—it leads to better product and allows distributed teams to securely collaborate and share knowledge.
The rocket here doesn’t add meaningful information.
If an image has a label nearby, leave the alt-text blank.
<div>
<img src="leaderboard.svg" alt="">
<h2>…</h2>
<p>…</p>
</div>
TOP LEADERBOARD: 728X90
This ad unit is the most visible on the site.
The nearby text here already explains what the graphic illustrates. If there was alt-text here, screen readers would repeat information to the user.
alt="") will cause a screenreader to skip over the image. Never remove the alt-attribute. When a screenreader comes to an image without an alt attribute, it will dictate the filename (Eg. “SO underscore logo dot png”).
Inside an <img> tag, add the alt-text inside the alt attribute:
<img src="image.png" alt="The alt text.">
<img src="image.svg" alt="The alt text.">
Inline SVG doesn’t support the alt attribute, so instead add two wai-aria attributes: role="img" and aria-label="The alt-text.":
<svg role="img" aria-label="the alt-text" viewBox="…">…</svg>This content was adapted from Axess Lab.