Writing alt text for images

Knowledge Hub Knowledge Sharing
1

Came across a cute graphic that shows how to write good alt text for images, thought I’d share since there have been a lot of great topics about accessibility posted over the past few weeks. :smiling_face:

An infographic titled “How To Write Alt Text” featuring a photo of a capybara. Parts of alt text are divided by color, including identify who, expression, description, colour, and interesting features. The finished description reads “A capybara looking relaxed in a hot spa. Yellow yuzu fruits are floating in the water, and one is balanced on the top of the capybara’s head.”
An infographic titled “How To Write Alt Text” featuring a photo of a capybara. Parts of alt text are divided by color, including identify who, expression, description, colour, and interesting features. The finished description reads “A capybara looking relaxed in a hot spa. Yellow yuzu fruits are floating in the water, and one is balanced on the top of the capybara’s head.”1000×871 691 KB

Source: https://www.perkins.org/resource/how-write-alt-text-and-image-descriptions-visually-impaired/

3 Likes
2

I’ve been doing some research / testing with Yoast in WordPress lately, experimenting with some AI generated meta and ALT text. Afterwards I had the opportunity to test some webpages on actual screen readers.

I’ll start by saying that some screen readers sound more natural than others, when reading back page content (and ALT text). A few sounded like robots. Others you could have been mistaken for somebody sat next to you, reading passages from a book, they were that good.

One thing I want to share with you that made a big difference towards consistency in how ALT tags were read aloud was the use of punctation. Including a full stop (period) at the end of the ALT text.

If you add a full stop at the end of the ALT text, all the screen readers I tested put a definitive pause at the end of the ALT text, before moving onto the next item. Especially if you had an image gallery, with the ALT text of each thumbnail being read in succession.

I think this could be a small detail that makes a big difference, so I wanted to share it with you all.

This is the guide I tell some of my clients to bookmark, to help them understand what ALT text is and how to write meaningful image descriptions:

3 Likes