Ensure to provide alternative text for images

Posted on January 8, 2024

Takeaways

⚠️ Missing alt text is one of the most common accessibility issues on the web
Alternative (alt) text is necessary for users that rely on screen readers to provide a description of the image to them
The same image in different context may need a different alt text
Some images may qualify as decoration and may not need alt text
Images posted on social media must also include alt text

This article is part of a series on user interface micro interactions and how they affect the user experience.

Cet article est également disponible en français.

Sight-impaired users often rely on screen readers to describe the content of the screen to them. One of the elements that require descriptions are images. Photos, illustrations, graphics, and all sorts of images convey information to sighted users, and it is the responsibility of digital content creators to provide alternatives for sight-impaired users to be able to also obtain the information from the images designers or content creators have embedded in a website or other digital product.

Luckily, HTML offers an easy way to assign descriptions to images: “alt text”.

“Shortened from ‘alternative text,’ this is a short visual description that provides a general sense of the content of an image. It is structured as a sentence fragment that indicates the most important content of the image […].”

— “Cooper Hewitt Guidelines for Image Description”

This article is a primer to bring alt text to the attention of content creators — Copywriters, Designers, Developers, and yes, Project Managers of all sorts.

See the “References and Additional Readings” section for links to in-depth articles.

When to use the `alt` text

On websites and web apps

Not every single image on a website needs to provide a description for screen readers to announce to users. However, as a first step, it is best to ensure to write descriptions for every image, and then choose which image should use what description, and when.

To note: the same image may benefit from a different description, depending on the context in which it is used.

Remember

The W3C created a useful decision tree which helps to choose when the alt text should be applied to an image.

On social media

While the production processes for websites and web apps often forget to take into account the alternative text required for images, social media publications omit it almost all the time.

Writing alt text for images published on social media must follow the same rules as those defined for images published on the web. Here are a few key points to bear in mind:

The alt text must factually describe the image in context; it is not a marketing text.
alt text is not a space for additional text to supplement the post, nor for meta-humor.
If a posted image shows text, this text must be used as alt text.

Remember

Images posted on social media must also include alt text.

Concerned stakeholders

Everyone is responsible to ensure alt text has been created for images. Anyone who uploads an image which will be visible on the website is responsible to ensure that the image has an alternative text, and that this text applies properly to the situation in which the image is presented.

UX Designers should analyze the type of image used in the context of the interface they are creating to determine whether these images need alternative text.
Copywriters should be sure to take a look at the interfaces created or published to write or translate alternative texts.
Developers should pay attention when integrating images into digital products to make sure they are using the right code to add alt text.
Developers should also mention to their colleagues (Designers, Copywriters, Project Managers) when they are missing alt text.
Project Managers should follow up with the people mentioned above during the design phase and during production, to ensure that alt texts have not been overlooked.

This responsibility cannot be be simply delegated to Developers, it is a team effort to ensure that all know when text is required, and to ensure that it is not missing.