 All right, this is HTTP 2.0.3, whichever episode it is. And this is the writing good alt text episode. Are you ready for the clap server? Because you're going to get it. That's three, two, one. So, working in DevRel, you write articles, 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, Serma? It's like a grimace. I've borrowed a line 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 1,000 words, worth 1,000 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. You can't create the alt text without knowing how the image will be used. And I've actually seen large companies make this mistake. 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 take this. Fairly simple image. But there's still lots going on. Is the bike important? Is the woman important? The railings? What is it? 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. 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. Like, you know, if there was something wrong with the color 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 like 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 a 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 up, 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 like doesn't matter in this context. But what about hiding behind the plant? And this is when I was starting to get unsure, like I'm doing something deliberately in that image. Like, does that have meaning that isn't in the text? I put this question out on Twitter because I was, 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, you know, top accessibility experts and a screen reader user. It's someone who was like 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 it like, I've had a hangover caused by Leonie. So like, is it right to still count as someone as a, you know, a hero? 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 like hiding behind a plant sort of does. Like, how does this make you feel so? What's, what's the emotion? It's just, it's you, it's you being silly, isn't it? Yes. Yeah. Like, 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 Hart's wall 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 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 an alt 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? So those are the kind of things that I included in the alt attributes. Otherwise, you know, 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 a decision more guided. It doesn't make it as 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. Okay. 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. Same. 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 consider. But yeah, absolute minefield. In that case, you would consult the speaker, right? You would say, here's what I'm thinking. Does this matter? Should this matter to a screen reader user? Because yeah, it's pretty sensitive, but as you say, we know if there's a talk about diversity and the pictures of a white speaker, you definitely feel different about it, don't you? So 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 the speaker themselves just depending on how to frame it for one, but also whether it should be framed. But yeah, that's all I've got. 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 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 altie. An altie string. And we're done.