by Mat Janson Blanchet

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:

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.

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

Why Instagram Alt Text Matters (And How To Use It) | Hannah Macready – Hootsuite

Accessibility

Understanding Success Criterion 1.1.1: Non-text Content (Level A) | WCAG 2.1 Understanding Docs – W3C

Understanding Success Criterion 1.4.5: Images of Text (Level AA) | WCAG 2.1 Understanding Docs – W3C

Understanding Success Criterion 1.4.9: Images of Text (No Exception) (Level AAA) | WCAG 2.1 Understanding Docs – W3C

Last updated on February 13, 2024


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.