Missing alternative text is a common accessibility error, so let’s learn:
Rather watch the video? Watch our alternative text playlist for the video version of this content.
What is alternative text?
Alternative text describes an image. Its description should serve the equivalent purpose as the image. Equivalent purpose is key, so we’ll talk more about it in the section How do I write great alternative text?
When most people think of alternative text, they think of the HTML
alt attribute that look like this:
<img src="https://blog.pope.tech/wp-content/uploads/2022/03/missingalttext.png" alt="Missing alternative text WAVE error icon">
But, it can also be text on the webpage that is near the image, or if the image is complex, a link to a separate webpage with a detailed description of the image.
Whether it’s just an HTML
alt attribute or text on the page, every image should have an
alt attribute, even if it’s empty like this
alt="". We’ll go over why in the section When should I write alternative text?
Why does alternative text matter?
As a text substitute for images, alternative text is critical for an accessible website. But, it has benefits outside of web accessibility too.
alt attribute improves your website with these benefits:
- Screen readers and other assistive technology read the
altattribute text out loud to convey the meaning or purpose of images. Listen to an example of two screen readers reading images with and without
- If images don’t load for any user, the
altattribute text shows in the image’s place.
- Search engines use the
altattribute text to improve search results.
What are the three types of images?
Before we go any further, it’s helpful to know the three types of images when it comes to alternative text:
- Informative images provide content and need alternative text near the image or in an
- Decorative images don’t add any content to the page – their only purpose is visual appeal. They need an empty
- Functional images are linked images and need alternative text nearby or in an
altattribute that’s a description of the image and makes it clear where the link goes.
When should the alt attribute be empty?
Earlier, we said every image should have an
alt attribute, even if it’s empty like this
alt="". If the
alt attribute is empty, the screen reader will skip the image. If there’s no
alt attribute, the screen reader might try to read the image file name, which would be unhelpful and confusing.
Let’s go over three scenarios for each type of image where the
alt attribute should be empty, or null, so the screen reader skips the image.
Alternative text is on the page near the informative image
The first scenario where the
alt attribute would be empty is if there’s on-screen text that already describes the informative image. Including the
alt attribute here would sound repetitive to the user.
Let’s look at an example. If I were writing about university campus life and was talking about an area of campus that was open grass space, or a quad, I might say something like this:
Students enjoy sports, lounging, and other activities on the large grassy area students call the Quad, which is right next to the iconic Old Main building.
In this example, the text next to the image also serves as the alternative text, so the
alt attribute for the image can be empty.
Image and text are wrapped by the same <a href>
The second scenario where you’d use an empty
alt attribute is when the same
<a href> attribute (the HTML used to create links) wraps around the functional image and link text. Then, the link text can serve as the alternative text.
Let’s review an example with the
<a href> wrapped around the image and link, and then the same example with one
<a href> around both the image and the text.
Our example is a faculty or team member image with their name and job title. The image and name would link to their about page – in our example, the link doesn’t go anywhere.
If you hover anywhere over the image or even above the linked name, you’ll notice it’s all linked. This is because the image and name are wrapped in the same
<a href>. The code for the example is below and shows the
<p> with the name wrapped by the same
<a href="#"> <img src="https://blog.pope.tech/wp-content/uploads/2022/03/pexels-andrea-piacquadio-774909-1.jpg" alt="" height="auto" width="150px"> <p><strong>Lisa Lewis</strong></p> </a> <p>Job title</p>
Because they are wrapped with the same
<a href>, the image is connected with the text, so the
alt attribute can be empty. The screen reader will say something like “link, Lisa Lewis” out loud, which describes the images and provides enough context about where it will go given it’s on a faculty page.
Let’s look at this same example, but the image and text each have their own
If you hover over the image or text, you’ll notice they are linked. But, if you hover above the linked text, that area is not linked like it was before because they each have their own
<a href> now, which is in the code below.
<a href="#"> <img src="https://blog.pope.tech/wp-content/uploads/2022/03/pexels-andrea-piacquadio-774909-1.jpg" alt="About Lisa Lewis" height="auto" width="150px"> </a> <a href="#"> <p><strong>Lisa Lewis</strong></p> </a> <p>Job title</p>
This time, the image would need an
alt attribute because the image and text aren’t connected. The screen reader user needs to hear the alternative text for the linked image, and then they will hear the link text as they continue to navigate, so it would sound something like “link, About Lisa Lewis” then “link, Lisa Lewis.” It will sound repetitive to the screen reader user, which is why it’s better to wrap the image and text in the same
The image is only decorative
The third scenario where the
alt attribute would be empty is decorative images. Including an
alt attribute here doesn’t add any value to the screen reader user and just clutters their screen reader output.
Treating an image as decorative is a decision only the author can make based on the reason the image is on the page. According to W3C’s decorative image guidelines, an image is decorative if it doesn’t add any content to the page, so its only purpose is to make the page more visually appealing.
Let’s look at two examples. The first is a border or separator that’s an image. This doesn’t add any content to the page – it only helps with the page design.
In this second example, there’s an image of two young adults laying on the grass looking at their phones. Next to it, the university page has links for degrees, information, and other admission information.
This image is what W3C calls an “ambiance” or “eye-candy” image – it only adds visual interest to the page. If there were alternative text for the image, it might be two happy, young adults looking at their phones on the grass. This doesn’t add any relevant content to the existing “admissions” page narrative, so the
alt attribute can be empty.
How do I write great alternative text?
For functional and informative images that need alternative text, there are four guidelines to making it great. Let’s go over each.
Don’t use “image of” or “link to” language
Screen readers and other assistive technology will announce it’s an image or link before reading the text, so including “image”, “picture”, “link”, or “click here” language is redundant.
- Golden retriever
- Reserve box seats
- Picture of golden retriever
- Click here to reserve box seats
Use proper grammar
Capitalize the first word, and end full sentences with periods.
Keep it succinct
Keep alternative text to a few words – only use a sentence or two if necessary. If the graphic or image is complex, try W3C’s complex images strategies.
Purpose, purpose, purpose!
We say purpose three times because it’s that important. The purpose of the image can change what the alternative text actually is. That means the same image used in different contexts, or for a different purpose, could have different alternative text.
Let’s look at this image of the ocean.
Let’s say the page content was about how relaxing the ocean is. The alternative text could be Ocean. I wouldn’t mention the sunset in this scenario because the sunset isn’t discussed in the page narrative.
Now, I’m using the same image, but instead, the page is about about ocean sunsets, my alternative text would focus more on the sunset in this image, so it might be Ocean at sunset.
If the page narrative was about a specific beach in Hawaii, I’d include the name of the beach, so it would be Waikiki beach.
Read more about alternative text
Check out these resources for more information:
- WebAIM’s Alternative Text complete guide
- W3C’s Web Accessibility Images Turtorial
- W3C’s alt decision tree
- All image-related WAVE accessibility results.
- AI Generated Alternative Text: Missing the Point of Context
- Alternative text is an image description that serves the equivalent purpose as the image.
- It can be text on the page near the image or text in the HTML
- When the
altattribute is used, screen readers and other assistive technology will announce it’s an image and read the text.
- When it comes to alternative text, there are three image types: informative, decorative, and functional.
- If the image doesn’t need text in the
altattribute because the alternative text is on the page near the image or the image is decorative, the
altattribute should be emptry like this
- Great alternative text doesn’t use “image of” or “link to” language and uses proper grammar.
- Great alternative text is also succinct and considers the image’s purpose. In fact, depending on the purpose, the same image could have different alternative text.
Want to be part of the conversation?
Share questions, feedback, and experiences on Twitter
Sign up for our newsletter to get emails with accessibility content similar to this article. If you subscribe, we’ll email you web accessibility insights or things we learn a few times a month. You can unsubscribe at any time.