What alternative text is, when to use it, and how to write great alt text

---

---

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 alt attribute.

Back to top

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.

Using the alt attribute improves your website with these benefits:

1. Screen readers and other assistive technology read the alt attribute text out loud to convey the meaning or purpose of images. Listen to an example of two screen readers reading images with and without alt attributes.
2. If images don’t load for any user, the alt attribute text shows in the image’s place.
   
3. Search engines use the alt attribute text to improve search results.

Back to top

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:

1. Informative images provide content and need alternative text near the image or in an alt attribute.
2. Decorative images don’t add any content to the page – their only purpose is visual appeal. They need an empty alt attribute.
3. Functional images are linked images. They either need alternative text nearby that is also within the link or alternative text in the alt attribute. 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.

Back to top

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:

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 <img> and <p> with the name wrapped by the same <a href>.

<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 <a href>.

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 <a href>.

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.

Back to top

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.

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.

Back to top

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:

• Missing alternative text
• Linked image missing alternative text
• Suspicious alternative text

Follow these steps to find and fix the alternative text problems you find on your own Canvas course or website:

1. Use the Canvas Accessibility Guide, Pope Tech Platform, or the free 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 (free) – Test four pages on a website or course you contribute to.
2. If there are more than 10 issues, fix at least 10. Log the rest in your or your team’s project management tool.
3. 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.

Back to top