How to use alt text in accessible images

Introduction

When it comes to creating accessible web pages, one important aspect to consider is the use of alternative text (alt text) for images. Alt text is a substitute for non-text content on a webpage and serves several important functions:

• if an image fails to load, the browser will present the alternative text in place of the image
• screen readers will read the alternative text in place of images
• search engines use alt text to better understand the page's purpose and content

It's important to note that every image on a webpage should have an alt attribute, even if it's an empty string.

Real-life example

A real-life example of alt text in action can be seen in the following scenario:

Imagine a part of a website that includes an image of a bowl of soup, along with a short paragraph of text describing the soup:

Soup is a primarily liquid food, generally served warm or hot (but may be cool or cold), that is made by combining ingredients of meat or vegetables with stock, milk, or water. Hot soups are additionally characterized by boiling solid ingredients in liquids in a pot until the flavors are extracted, forming a broth. Soups are similar to stews, and in some cases, there may not be a clear distinction between the two; however, soups generally have more liquid (broth) than stews.

Here are the options for the alt text for this image:

• "Hungarian goulash soup"
• "Image of Hungarian goulash soup" (redundant as it describes the image as an image)
• "Hungarian goulash soup generally served warm or hot" (includes information not conveyed in the image and available in the accompanying text)
• empty alt="" (not appropriate as the image conveys content)

The most appropriate option for this image is "Hungarian goulash soup."

More complex cases

In more complex cases, such as an image with a subtitle or a decorative image that serves no real function, the use of alt text may be different. If the same image in the previous example is displayed with the text "Hungarian goulash soup" in-between <strong/> tags, the best option would be to use an empty alt text, alt="", as the content of the image is already presented in the adjacent text.

Image with subtitle and decorative images

Decorative images that:

• serve no real function,
• do not have a real informative purpose,
• do not present meaningful content, should also have an empty alt text alt="".

A good rule of thumb is to ask yourself, "if I could not use this image, what would I put in its place?" If the answer is "nothing," then the alt text should be an empty string.

Problem: The default behavior of screen readers

One problem that can arise when using images on a webpage is that when a screen reader encounters an image, it will read the file name to the user. While this may be helpful in some cases, such as when the file name is "kitten.jpg," it can be a problem when the file names are hashed and difficult for users to understand.

Solution: Adding alt text to override the default behavior

The solution to this issue is to add an alt attribute to override the default behavior and have the screen reader read the alternative text instead of the file name.

What to do when the content of an image is unknown?

In situations where the content of an image is unknown, such as when a user uploads a picture to an application, there are a couple of options.

One option is to use a generic label, such as "User-uploaded content" or to use an empty alt text, alt="", which will cause the screen reader to skip the image entirely and not read either the file name or the alt text.

SEO

Finally, it's important to note that search engines also scan alternative texts. In the past, many websites used to put lots of keywords in all alt texts, which resulted in a poor accessibility experience. However, it's important to remember that the primary purpose of alt text is to provide users with an accessible alternative to the image and not to stuff it with keywords.

Conclusion

In conclusion, the use of alternative text (alt text) for images is an important aspect of creating accessible web pages. Alt text serves several functions such as providing a substitute for non-text content, helping screen readers read images, and assisting search engines in understanding the page's purpose and content. It's important to note that every image on a webpage should have an alt attribute, even if it's an empty string.

However, in more complex cases such as images with subtitles or decorative images, the use of alt text may be different. One issue that can arise is when a screen reader encounters an image and reads the file name, which can be solved by adding an alt attribute to override the default behavior. In situations where the content of an image is unknown, options such as using a generic label or an empty alt text can be used. Overall, alt text is crucial for creating accessible and SEO-friendly web pages.

⚡️ Action Points

• see my blog a about Javascript and React
• give a like or write a comment