How to Write Good Alt Text for the Images on Your Web Page
To make Web pages accessible, use alt text for images. That's what we're always taught. But there are good and bad uses of alt text. There are also cases when having no alt text is actually the right thing to do.
- Difficulty:
- Easy
Instructions
-
Distinctions in Alt Text
-
1
If alt text is needed, add it as an attribute of the img tag of your HTML. It is simply alt="here's example alt text" written as part of the img element.
-
2
The purpose of alt text is to explain the meaning of an image if the image isn't showing. Look at the Amazon menu image at the beginning of the article. Alt text is what you see when the Amazon.com menu is viewed without images. As you can see, the menu is still completely usable and understandable thanks to proper alt text.
-
3
Good alt text for anything that is to be clicked in a menu should say the same thing the image says. For example, alt text for a button that says "Home" should also say "Home." The alt text replaces the image in content and function.
For non-menu images that are meant to be clicked, the alt text should explain the purpose of the click. For example, an image of a book with a link to buy it from Amazon.com should says something like alt="buy this book at amazon.com".
-
4
Alt text for an image that provides content and meaning to the page should explain the content or meaning provided by the image.
-
5
This image has alt text detailing what will happen when the user clicks the image.
There is a distinction between images that provide information and content versus images that are merely decorative. For example, look at this image from the eBay.com page. (The alt text is shown using the Firefox Web Developer toolbar.)
-
6
A merely decorative image needs no alt text
By contrast, look at another image from eBay.com. Here the image is merely decorative. It adds no meaning to the information below it about other eBay companies, therefore it needs no alt text.
-
7
When you add an image to a Web page that adds no content or information to the page, simply put nothing in the alt text, like this alt="". Don't put anything between the quotation marks--no spaces, nothing. An aural screen reader will ignore this and not announce it.
-
8
If you can, remove merely decorative images from the HTML and add them to the page using CSS background rules.
When people view pages with images off, it's either to save time, because their browsers does not display images, or because they are using an assistive device such as an aural screen reader.
When decorative images are added to the display using CSS, they aren't part of the content of the HTML at all. Therefore, a user with images off for whatever reason is not bothered by unneeded information about images that are not content.
-
1
