Posted on

Alternative text (alt text)


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?

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.
    News feed with missing images, and their alt attribute text showing instead.
  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 and need alternative text nearby or in an alt attribute that’s a description of the image and makes it clear where the link goes.

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:

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.

Lisa Lewis

Job title

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

About Lisa Lewis

Lisa Lewis

Job title

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.

Good examples

  • Golden retriever
  • Reserve box seats

Poor examples

  • 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.

When you’re using WebAIM’s WAVE accessibility checker or Pope Tech, there’s an 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.

Example image

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.

Back to top

Read more about alternative text

Check out these resources for more information:

Key takeaways

  • 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 alt attribute.
  • When the alt attribute 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 alt attribute because the alternative text is on the page near the image or the image is decorative, the alt attribute should be emptry like this alt="".
  • 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
using #AccessibilityFocus.

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.


    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.