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 missingalt
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.
References and Additional Readings
Articles
The WebAIM Million – The 2023 report on the accessibility of the top 1,000,000 home pages | WebAIM
Alt-texts: The Ultimate Guide | Daniel Göransson – Axess Lab
An alt
Decision Tree – Tutorials | W3C
Best Practices for Image Text Alternatives | Knowbility
Cooper Hewitt Guidelines for Image Description | Cooper Hewitt
8 guidelines to make social media posts more accessible | Carly Hill – Sprout Social
Everything you need to know to write effective alt
text | Microsoft
A guide to writing alt
text and accessible image captions | Chase DiBenedetto – Mashable
How to Use Alt Text on Social Media (+ 5 Best Practices) | Alyssa Gagliardi – Later
How to write an image description | Alex Chen – UX Design
How to write good alt
text for screen readers | Craig Abbott
Images Tutorial – Tutorials | W3C
Just How Long Should alt
Text Be? | Geoff Graham – CSS Tricks
Thoughts on embedding alternative text metadata into images | Eric W. Bailey
Why Instagram Alt Text Matters (And How To Use It) | Hannah Macready – Hootsuite
Accessibility
Understanding Success Criterion 1.4.5: Images of Text (Level AA) | WCAG 2.1 Understanding Docs – W3C
Last updated on March 13, 2024