Writing good Alt text for images

Everyone deserves a good experience

Note: It’s hard to speak about anything else but COVID-19 but I’ll try anyway.

As I learn more about accessibility, I realized that I wasn’t writing good Alt text or alternative text descriptions for the images I was sharing on social media. These descriptions are used by visually impaired users who browse the web using screen readers to understand the content of the images better.

What to do:

- Make the description meaningful - Think of what intent is for the image

- Make it concise - Think of it as a length of a tweet

What not to do:

- Don’t leave it blank - Users with screen readers will not know what the image is at all since screen readers will ignore the image in this case.

- Don’t make a vague statement - You want to make sure the image is described correctly so the screen reader users will be able to understand what the image is conveying.

- Don’t describe every single detail - Keep your descriptions short and concise. Think, what is the most important information I want to convey about the image I am sharing.

Let’s take the image below and write the alt text description:

Grayscale image of a woman with a black jacket and a face mask sitting on a train.

Good: Grayscale image of a woman with a black jacket and a face mask sitting on a train.

Bad - Too vague: Inside a train.

Bad - No description:

Bad - Too much detail: Woman in the foreground wearing a facemask but is blurry. There is another woman who is sleeping and is wearing a face mask and sitting in a train.

Next time you share an image on social media, make sure you take a moment to add a good description.

Everyone deserves a great experience on the web.

Till next time, stay safe!