All right, this is HTTP 203, whichever episode it is, and this is the writing good alt text episode. Are you ready for the clap, Soma? Because you're gonna get it! That's three, two, one. So, um...
So? Working in DevRel, you write articles, specs, demos. Don't do it. Just don't work. Yeah, don't do it, man.
No, I love this job, but every now and then, I have to make a plain old website. Imagine that. For me, it was the Chrome Dev Summit website for last year, and I was faced with this age-old problem. What alt text should I use for images like this one?
Well, something that describes the image. End of episode. See you next time.
Perfect. It's as simple as that. So in this case, these are speaker images, right?
Because it was a Chrome Dev Summit website. And it's not easy, is it? Like, what about this? It's a picture of me. I am Jake Archibald.
There you go. I'm behind a fern-like plant. I'm wearing glasses.
I'm pulling a sort of half smile. What would you call that, Surma? Like a grimace?
Um, I... borderline of insanity? Yeah, probably on the other side of the border. I'm quite pale, don't know if you've noticed that before.
I also have the dull gray eyes of someone who's dead inside. This is all information that is unavailable to users who can't consume the pixels of this image. What's the saying?
A picture is a thousand words, or worth a thousand words, whatever. But describing this picture in total detail... is overkill for an alt attribute. So it's really a question of where is the line? I think the answer is it depends because that is always the answer in tech.
Yes, absolutely. And one big part of that depends is that context matters. Like you can't create the alt text without knowing how the image will be used.
And I've actually seen like large companies make this mistake. Like they have a library of images and in the library, the alt text is in the library. And it's, no, that's bad because like...
Take this fairly simple image, but there's still lots going on. Like, is the bike important? Is the woman important? The railings?
Like, you know, what is it? Yeah. Is this picture used to showcase the architecture used in the Alps?
It really depends. Absolutely. So here's some context.
So if the article is about the businesses, then the alt text could be the two hotel fronts. Like, we wouldn't need to name the hotels because the headline does that. for us.
There's context there already. If the legal dispute here was to do with the appearance of those buildings, then maybe you would include that. If there was something wrong with the colour they painted it or the style of windows, then yes, that would go as part of the alt text. But otherwise, the two hotel fronts, that's good enough.
But if the article is about bikes, now the businesses don't matter. They're just a background. So the alt could be a city bike customer cycling along a city road. Job done.
But now our image has a caption equivalent to the alt. So now it's best to make the alt an empty string to avoid the repetition. There's no point, like for a screen reader user, them hearing the same thing twice.
That's what I usually do. If I have a full picture with thick caption and everything, I remove my alt attributes. Well, you shouldn't remove the alt attribute. You should leave it empty because that's a signal that you thought about it.
Okay. And there's no additional information. Without an alt attribute...
It's kind of ambiguous that from the dark days of the web, when people just didn't write this stuff, I say the dark days of the web, there's still a lot of people don't write alt attributes. But that happens today, yeah. But that's a signal that there's no alt attribute.
It means you haven't thought about it. And that's why it crops up in validators and audits and that kind of thing. All right, so we have some context. It's a list of speakers at a conference. And for a long time, I would use an empty alt in this case because my name's already there.
So I wouldn't want to repeat it. And the fact that I'm wearing glasses doesn't matter in this context. But what about hiding behind a plant? And this was when I was starting to get unsure. I'm doing something deliberately in that image.
Does that have meaning that isn't in the text? I put this question out on Twitter because it's something I've always gone back and forth on. I can never decide. And Leonie Watson weighed in.
And she's one of the top accessibility experts and a screen reader user. It's someone who was like, oh, a big fan of in the early days of my career. I still am as well. I would say, are you not anymore? Has she done something wrong?
No, it's odd. Like, well, I've since met Leonie and she is dangerous to go drinking with. So, like, I've had a hangover caused by Leonie.
So, like, is it right to still count someone as a, you know, a hero? I think it probably is. I think it probably is.
Yeah. Anyway. Yeah, absolutely.
Here's what she said. Emotion matters. And this framing really helped me out.
It was part of an article she wrote, so I'll link to the full article, but here's the gist of it. The fact that I'm wearing glasses doesn't really carry an emotion in this context, but hiding behind a plant sort of does. How does this make you feel, Sona?
What's the emotion? It's you being silly, isn't it? Yes. Yeah. I would say charming.
no no you're right it's silly like i'm it's like hey look at me it's fun guy jake peering out behind a plant not in a creepy way it's in a fun way definitely like there's something going on there so jake archibald cheekily hiding behind a plant would be an alt text which actually carries that emotion it gives a screen reader user like that part of the image and that that kind of opened up like a whole new world for me with like it simplified a lot of decisions i was making with with alts I went through all of the speaker images on the Chrome Dev Summit website and applied this logic and boy it felt judgy It felt really judgy because I was looking at people's avatars and going you do not deserve a not because it's just you Like you're not doing a thing. It's just a headshot or whatever But yeah, it came down to whether they were doing something that carried an emotion like were they wearing cool sunglasses drinking a cocktail were they pulling a particular face? Were they wearing a silly hat?
Those are the kind of things that I included in the alt attributes. Otherwise, they got nothing. And I'm not saying this makes it easy.
And also context. No, but it does help me frame things and make some make definitely make the decision more guided. It doesn't make it very trivial, but it definitely scopes much more what you think about when looking at an image, whether it deserves an alt and what the alt should be.
So I really like that. OK. I'll, um. And I'm going to say it's still not easy and context still matters a ton. And I'm going to put you on the spot in a very, very dangerous way.
Oh boy. Are you ready? Do it.
Does the skin color of the speaker matter? I know that's horrible, isn't it? I can't believe I did that to you.
I'm really sorry. I same. It's. It is a very interesting question because on the one hand, a screen reader user that cares for diversity cannot necessarily deduce from the name if the lineup is diverse. That's actually a really good point.
That's a really good point. I would say as well, again, context matters. And so if the talk was about race or the speaker's personal experience of race, then the racial appearance of the speaker starts to matter more.
And it's something you would... like consider but yeah absolute minefield like it is like in that case you would consult the speaker right you would say here's what i'm thinking does this you know matter should this matter to a screen reader user um because yeah it's pretty sensitive but it's as you say um we know like if there's a talk about diversity and the picture is of a white speaker you definitely feel different about it don't you so it's it's it's context that matters It's super interesting because we have seen a bit of a change in our industry where we have normalized putting your pronouns into your speaker description or your Twitter profile and your biography, whatever. Yes. And so if like how someone visually presents is, especially if in context of the talk, it matters, then yeah, it's definitely a candidate for going in the alt attribute. But yes, you would definitely consult with the speaker themselves, just depending on, well, how to frame it for one, but also whether it should be framed.
But yeah, that's all I've got. Like, context matters. That was the bit I always knew about alt text.
But that next step, that emotion matters. That has really improved how I write alt text. Yeah.
And dear viewer, if you don't write alt texts, it's about time you start. Absolutely. What's the alt text?
Like, is the bike important? Oh, one, Jake. In this case, you use an alti.
an alt-t string. And we're done.