Understanding the purpose of an image using alt text

A quick tutorial on how to provide alt text for different sorts of images in such a way that people using assistive technologies will be able to understand the purpose of the image.
Understanding the purpose of an image using alt text

Transcript

Hi everyone, I’m Dan from Nomensa and this week I’m going to be talking to you about how to use alternative text when an image is part of a link.

We should all be aware that the alt attribute of an image is important for accessibility. It provides a textual alternative of an image for people with blindness or those who choose to use text-only browsers. If a text-only browser is used, any images in the page will show the alt text as opposed to the image.

Screen readers on the other hand will look for the alt attribute of an image when it is encountered and announce its value. However, there are some subtleties that should be considered when writing alternative text for images. One of the most frequently misunderstood subtleties is how to write alternative text for images that are the content of a link. So what do we do with image links? This is largely dependent on the other content contained within the link.

Consider the link shown in the example. The link does not have any textual content, and the image nested within it does not have an alt attribute. Because the image does not have an alt attribute most screen readers will look for and announce the href attribute of the link itself (not particularly useful in most circumstances). [Screen Reader] Heading level 2, food and drink. Link 723p-x-260_Linguine_v.4.jpg This does not help people to identify the purpose of image links and as such, omitting the alt attribute should be avoided at all costs.

So how do we make use of the alt attribute to describe the purpose or destination of an image link? This depends largely on whether the link contains text or not. Strictly speaking, if a link contains an image but no other text the image should be given an alt attribute that describes the purpose or destination of the link. Consider the link in our second example. Because the image here is the sole content of the link, the image has been given an alt attribute that describes the links destination. A blind person using a screen reader will therefore hear the value of this alt attribute when they move focus to the link. [Screen Reader] Link, Great savings on 100s of lines from home, electrical and toys This is certainly an improvement to the previous example, and provided the alt text accurately describes the destination of the link, should ensure the link is deemed accessible. So how do we deal with a link that contains both an image, and link text?

Consider our final example. This link contains link text that is sufficiently descriptive to describe its purpose or destination. As such, we do not need to provide any extra information using the alt attribute of the nested image. As mentioned earlier, if the alt attribute is omitted from the image tag on the page, screen readers will look for and announce the value of the src attribute instead. We most certainly do not want this to happen. As such we must provide an alt attribute, but will leave it blank. For people who use screen readers, this will mean that the screen reader will effectively ignore the image and will simply read out the textual part of the link. [Screen Reader] Link, RSS News Feed I hope I have shown that using alt text is not as simple as describing each and every image that is shown on the page. However, with a little consideration of each individual image, it should be possible to provide coherent and appropriate alt text without too many issues. This will have a significant positive impact on the browsing experience for people who use assistive technologies such as screen readers and those who choose to use text only browsers.

—

Start building accessibility into your projects at the beginning to save time and money, don’t just leave it hanging on the backlog letting it gather up dust. Drill it in.

If you would like Nomensa to help you with your accessibility challenges or to provide you with an accessibility evaluation of your website/mobile app, please don’t hesitate to get in touch.

Take a full look at the web accessibility and development services that we offer.