Define Images with Appropriate Text Alternatives
Images must have text alternatives that describe the information or function represented by them so they can be read and understood by those using screen readers.
Alternative text for images
- All
<img>elements should have analtattribute provided- When not provided many screen readers will fallback to reading the file name instead
- The
altvalue should not include words like “image”, “picture” or “icon”- Screen readers are already announcing that the element is an image
- Images that are decorative only and provide no information or function to the page should be hidden from Assistive Technologies by providing an empty
altattribute (alt=””)
References
- https://www.w3.org/WAI/tutorials/images/
- https://www.w3.org/WAI/tutorials/images/decision-tree/
- https://www.w3.org/WAI/tutorials/images/tips/
- https://www.w3.org/WAI/tutorials/images/informative/
- https://www.w3.org/WAI/tutorials/images/functional/
- https://www.w3.org/WAI/tutorials/images/textual/
Instructor: [0:00] Here I have a web page with some images that, as you can over here from React Axe, are missing alternative text. Here's the responsible code. As you can see over here, I've run ESLint. It's showing me the same finding, with image elements missing in alt prop.
[0:20] This is the image that's missing the alt prop. It corresponds to each of these movie poster images in my application. If we look at this component, we've got some information up here about the movie. This is my movie component.
[0:39] If we want to provide some meaningful alternative text for the image, which is of the movie poster, we should be able to put something together for that. If we provide an alt attribute, we can use the name of the movie in a template literal and combine that with movie poster.
[1:02] We run ESLint again. That finding is now gone. If we look at the browser, React Axe is no longer reporting that finding as well. If we go to Safari and run voiceover and listen to what that sounds like.
Screen Reader: [1:24] Inception" movie poster image. "Gladiator" movie poster image. "Raiders of the Lost Ark" movie poster image.
Instructor: [1:32] Now the name of the movie is read as the movie poster image. That's definitely more useful than what we had before.
[1:40] If we consider the functionality that these movie poster images is conveying to the user, they really don't provide any additional information that we're not already conveying through the title and all of the information and description of the movie that's already being read by the screen reader.
[1:58] Really, these are just decorative images. They're not functional in any way. What we could do instead of providing the name of the movie, movie poster as the alternative text, we could just provide an empty string. What this does is actually removes it from the assistive technology's tree. It won't be announced by the screen reader.
[2:20] Let's check real quick and make sure ESLint still approves. It does. React Axe is still not reporting any findings. Let's see what that sounds like when read by the screen reader.
Screen Reader: [2:43] Navigate. Heading. Add Inception. Heading level. Add Gladiator. Heading Level. Add Raiders. Heading Level. Add Mission.
Instructor: [2:52] The screen reader actually skips focusing on each image and does not announce its presence. When you're providing alternative text on your images, you'll have to consider what function does this image provide, does it need to be announced to the screen reader, or is it just decorative.
[3:08] It's only useful for those who are sighted and therefore would just be noisy or distracting if read by a screen reader.