Alternative text describes an image for users with visual disabilities. Every image needs an HTML alt attribute even if it’s empty, but not every image needs alternative text.
The alternative text should use proper grammar, be succinct, and relate to the image’s purpose on the page. That means the same image could have different alternative text depending on the context.
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 the alternative text is in the 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 and when it should be empty in the section When to have an empty
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. They either need alternative text nearby that is also within the link or alternative text in the
altattribute. The text should describe the image and where the link goes. There’s an example of this in the Image and text are wrapped by the same <ahref> section below.
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.
For real-world examples of the thought process behind writing great alternative text, read Alternative text in the wild: 5 alternative text examples.
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.
Use proper grammar
Capitalize the first word, and end full sentences with periods.
Keep it succinct
Keep alternative text to a few words – try to only use a sentence or two. If the graphic or image is complex, try W3C’s complex images strategies.
When you’re using WebAIM’s WAVE accessibility checker or Pope Tech, there’s a Long alternative text alert for when it’s more than 100 characters to help catch long alternative text.
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 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.
Fix alternative text issues on your website
Now that you’re familiar with alternative text, you’re ready to fix issues in your own content. The alternative text issues you’ll focus on are:
Follow these steps to find and fix the alternative text problems you find on your own Canvas course or website:
- Use the Canvas Accessibility Guide, Pope Tech Platform, or WAVE extension tool to find the alternative text issues listed above.
- Canvas Accessibility Guide – Test the syllabus, home page, and other pages for one course.
- Pope Tech Platform – From your Dashboard, drill down to the alternative text errors.
- WAVE extension tool– Test four pages on a website or course you contribute to.
- If there are more than 10 issues, fix at least 10. Log the rest in your or your team’s project management tool.
- BONUS: After fixing the errors, use your same tool to review Alternative text, which are images that have alternative text. Reviewing feature accessibility results is important because there can be alternative text that is written poorly. If you find any that can be improved, update them.
- 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 alternative text is in the
altattribute, screen readers will announce it’s an image and announce 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 empty 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. That means depending on the purpose, the same image could have different alternative text.
Share with others and get monthly updates
Sign up for our newsletter to get emails with accessibility content similar to this article. Subscribers get monthly web accessibility insights. You can unsubscribe at any time.
Check any page for accessibility errors
Check all your pages at once with Pope Tech. Your web accessibility data is ready in just a few minutes.
Make accessibility part of content editors’ and developers’ process with WebAIM’s WAVE extension tool.