Ensure to provide alternative text for images
Posted on January 8, 2024
- ⚠️ 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
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.
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.
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:
alttext must factually describe the image in context; it is not a marketing text.
alttext 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
Images posted on social media must also include alt text.
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
Developers should also mention to their colleagues (Designers, Copywriters, Project Managers) when they are missing
- Project Managers should follow up with the people mentioned above during the design phase and during production, to ensure that
alttexts 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.
References and Additional Readings
Last updated on February 13, 2024