An alt text case study

In today’s episode, I look at an example of alt text in the wild, and how we can make it better.

Links

• @38mo1’s original tweet
• Stacy’s improved version with alt text
• Source code

Transcript

Hello, hello, hello. This is the Vanilla JavaScript Podcast. I’m Chris Ferdinandi. Thanks so much for joining me.

In our last episode, we talked about how to write good alt text. Today, I wanna look at a case study in alt text.

So before we dig in though, I did want to let you know that next week, I’m going to be running my biggest sale of the year. And I’ll be sharing all of the details on Tuesday. So keep an eye out for that. But trust me, you don’t wanna miss this one. If you were interested in any of my course’s books or workshops, this sale is definitely the time to get those. All right, let’s dig in.

So a few years ago, Twitter user 38M01 shared a really funny graphic showing different types of Boolean operators as jack-o-lanterns.

And so he had this graphic with six panels and each one there’s a Venn diagram. And each of the circles in the Venn diagram is set up to look like a jack-o-lantern. And so you’ve got a Boolean operator for each one and then the images vary to kind of illustrate what the different Boolean operators do. The original image lacked alt text.

And a few weeks ago, Anastasia Stacey Collins kindly reshared the image with alt text added. In the last episode on writing good alt text, I noted that when writing alt text, try to describe the details of the image rather than simply stating what it is. This is in my experience, the most common thing that people get wrong when writing alt text.

Stacey’s alt text read, six panels that visualize Boolean operators slash machine logic using Venn diagrams decorated to look like jack-o-lanterns. This is a really nice description of the image. However, it still excludes visually impaired users from consuming and participating in the content of the image itself.

It would make a great description, title attribute or big caption text. It’s not good alt text. And I wanna be really clear here, I’m not picking on Stacey. This is how I used to write alt text. And if you were to go over to my website, gomakethings.com, you would almost certainly find lots of examples of images with alt text like that.

This is just one of those things that when you first start writing alt text, or you don’t have a lot of experience with it, feels like you’re doing a good job describing the image. But you need to remember that visually impaired users cannot see what’s in that image. And if you don’t describe it to them, they will never know.

Writing alt text like this comes from a good place. And I’m glad that people are providing alt text at all. It means that they’re aware it’s important and they’re trying to do the right thing.

So I wanna be very, very clear here. I’m grateful that Stacey created a version of this image with alt text. So let’s talk about how we can make what she did even better. So for the Boolean image, better alt text would describe the contents of each panel. This allows visually impaired users who navigate with a screen reader to get the same information that a sighted user would be able to just from looking at it.

I’m sure this isn’t perfect, but here’s my attempt at it.

A graphic with six panels. Each one contains a Boolean operator illustrated as a Venn diagram of jack-o-lanterns. Trick or treat. Both circles are orange and have one of the eyes while the smile runs from one circle to the other. Trick and treat. The overlapping area is orange with both eyes and the smile inside it. Trick XOR treat. Both circles are orange and have one of the eyes, but the overlapping area is white. Trick NOR treat. The background is orange with eyes and a smile while both circles are white and blank.

And then it goes on for a few additional Boolean operators.

If you’re hearing this and you’re thinking, wow, that’s a lot of words, you’re right, it is. And when we create and share images without alt text or with insufficient alt text, we’re robbing people who rely on screen readers of so much information and content. And that’s why it’s so important to write good detailed alt text for your images.

So that’s it for today.

If you’re ready to make this the year that you mastered JavaScript, I can help. Head over to gomakethings.com where you can find tons of learning resources. And if you want to save big on any of my paid offerings, I am running my biggest sale of the year next week, and you are not going to want to miss it.

See you next time. Cheers.