Menu

You don't always need alternative text

Published on by Hidde de Vries in code

In a project I worked on recently, I noticed almost everything in the page had alternative text. Sometimes this can be redundant, for example if there is already text on the page that says what the thing is. Let’s look at some examples.

Why alternative text

A lot of the web is text. This is great. As a medium, that makes the web super parseable for external tools like search engines and assistive technologies (AT). It makes it even a better medium than the real world, where such parsing still requires a lot more effort. Until machine learning is ubiquitous, I guess, the fact that we have so much text on the web, makes the web the ultimate medium for accessible content.

When it is needed

Whenever we include non-text elements on a page, it is a good practice to add alternative text. For example, when adding an image, whether it is a photo or something with three words of text in it, we can use the alt attribute to convey what’s on the image to anyone who can’t see it. We’ve all seen this:

<img src="delirium.jpg" alt="A pink elephant">

Or when adding a video, it is useful to add subtitles, for users who cannot hear the people talking in the video:

<video src="instruction-video.mp4">
  <track src="instruction-video.vtt" />
</video>

When it is not needed

Sometimes, alternative text is redundant. Look at these examples:

Speaker photos on a conference website

A page is divided in sections, with sections for each speaker. The heading in the section is the name of the speaker. There is also a portrait of the speaker. The photo does not require alternative text here, as it would be the same as the section heading, and that would be redundant. Note that the alt attribute is required, so in this case I would recommend an empty alt attribute: alt="".

I only learned this while volunteering for Fronteers Conference, which follows this pattern on its speaker pages (thanks Krijn).

Labelled icons

Here’s a close button:

<button type="button"><img src="close.svg" alt="Close" /></button>

In this case, there is only an icon, it exists on its own. An alternative text would be useful here, especially since it is used as an interactive element (like <a> or <button>). If a button is just an icon, it does not have text that can function as the element’s ‘name’. So when, for example, a screenreader announces ‘button’, it doesn’t announce what the button is (as it doesn’t know). Adding a text like ‘Close helps with that, so that the screenreader can announce ‘button - close’

But when an icon has a word next to it, for example ‘Log out’, the icon itself is decorative and does not need an alternative text:

<button type="button"><img src="close.svg" alt="" /> Close</button>

In this case we can leave the alt attribute empty, as otherwise a screenreader would announce ‘button - close close’.

When captions describe photos

Sometimes, photos come with visible captions that describe them. In these cases, it is not necessary to add text into the alt of the photo, as the alternative text is already out there, the description has fulfilled the need.

Conclusion

Alternative text is a great opportunity to make the non-text parts of the web accessible. However, look out for redundancy, and only add it when it conveys something that isn’t already there.

Comments & mentions (8)

Bram Duvigneau reposted this
@baldur@toot.cafe replied: “You don't always need alternative text”
hiddedevries.nl/en/blog/2018-0…
Job reposted this
Job likes this
Gunnar Bittersmann likes this
Gunnar Bittersmann 08 Feb 2018 14:30:00

I slightly disagree that conference speaker images don’t need an alternative text. Blind/weak-sighted people might want to save and share images; they should be aware that the images are even there.
The alternative text obviously depends on the context; instead of repeating the speaker’s name (“Forrest Gump”) it might say “portrait of Forrest.”

When there’s already a caption to an image on the page, the img element still needs an alt attribute—with empty value. Without alt attribute, screen readers would announce the file name. In this case, it might be useful to point to the caption with aria-labelledby, cf. Codepen

Hidde 09 Feb 2018 13:08:00

Thanks, Gunnar, for your comment. After reading your comment, I have just updated my text to explicitly mention the concept of an empty `alt` attribute.

I like your point about saving images, had not thought of that.

Eric Eggert 09 Feb 2018 17:17:00

Hi, my personal recommendation for speaker photos is to not have alt texts on any lists or overview pages (like the schedules), but if you have a specific speaker page, “Portrait/Avatar of” can be used.

If anyone wants to dive into the do’s and don’ts of using images and how to use alternative texts, the W3C has a whole tutorial here: https://www.w3.org/WAI/tutorials/images/

If unsure when to use what kind of alternative text, see this handy decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/

(Disclaimer: I am an editor of the W3C/WAI tutorials, but they wouldn’t be as comprehensive without the significant input of the Education and Outreach Working Group.)

Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.