Your poorly written alt text doesn't go unnoticed...

>> Virgil Carroll: 0:24

Now, with AI being everything, people have really started relying on tech to kind of make this happen. And I think that's causing a lot of problems because, sure, it can read an image and it can kind of interpret it, but does that really help the end user? I mean, this is not a new problem, Chad could probably tell you this has been around with CMSs for a really long time. All right, everyone, welcome back to Discussing Stupid! Thanks for joining us today. As always, I'm Virgil Carroll. I'm the owner and Principal Human Solutions Architect at High Monkey, and I'm also your host. And joining me today is.

>> Chad Heinle: 1:02

Hi, I'm Chad, also with High Monkey as a solutions architect.

>> Cole Schlotthauer: 1:07

Yeah, hi, I'm Cole. I'm with High Monkey I'm a consultant working on UX and content strategy.

>> Virgil Carroll: 1:12

All right, well, we're finally here in episode one. We finally made it. Oh, my gosh. I just feel like it's taken forever. And we all got a little bit of fit check here. I'm wearing some Garfield. What do you got on, Chad?

>> Chad Heinle: 1:25

There's really nothing better than bacon.

>> Virgil Carroll: 1:28

Good point.

>> Cole Schlotthauer: 1:29

Yeah, you got a point. I think my sweatshirt wins, though.

>> Virgil Carroll: 1:32

Yeah. Oh, that's nice. Anyway, so today, we decided to start really by talking about something that is really important to us, which is really around inclusive design. and for those that don't really know what inclusive design, we're talking about building things in the digital experience for everyone. And probably when you look at that, one of the first things that most people think of is they think of, WCAG or ADA accessibility compliance. and, we kind of take that a step further and we kind of look at it as not only there, but also the way content's written. and the way pages are formatted and everything that goes into really making it so that anybody who visits your webpage or your app or your podcast or whatever it is, really can get the information that they want, in the way that they need to. So, ironically, we thought one of the first topics, something that is still very badly done over time, it was to talk about alt text. And alt text is the thing that goes along with images, really to give it good descriptions. And it's something that has been around since accessibility requirements really started.

>> Chad Heinle: 2:47

It's ironic that it can be done badly because the function of it is very simple, but the implementation is where it gets tricky.

>> Virgil Carroll: 2:58

Yep. No, I agree. It's something that really kind of adds, a lot. And not only for people that are using screen readers, but even people for just like the rollover mechanism and that kind of stuff that you have in a visual experience. But it is something that I think part of the problem is for the most part it's an afterthought. it's not really something that people think about. They think of it as an "and" otherwise, you know, I'm building the content for my page "and" oh yeah, I've got to do these things here for accessibility to be compliant. And really where it needs to get to is that people are really thinking this is an all inclusive experience and that they're doing this kind of stuff and there, so

>> Cole Schlotthauer: 3:41

So what are some of these stupid practices that people are committing around alt text?

>> Virgil Carroll: 3:46

Yeah, well, that's a great question. I mean, I definitely think the first thing is, like I said, it can be kind of an afterthought, but I think something on top of that, especially in today's world now with AI being everything, people have really started relying on tech to kind of make this happen. And I think that's causing a lot of problems because, sure it can read an image and it can kind of interpret it, but does that really help the end user? I mean, this is not a new problem, Chad could probably tell you this has been around with CMSs for a really long time.

>> Chad Heinle: 4:17

Yeah. And it really is a context thing, that we are missing out on there. So even before AI, but in addition to AI, now it's, you know, a picture of a smiling man. Is it the CEO? Is it a co-worker? Is it somebody important? Or is it just filling in the alt text with the image name? That can really be a simple way to get the alt text passed, but it's not providing anything useful to that.

>> Virgil Carroll: 4:47

Yeah, and that's such a great point because that's one of the biggest problems, is people do it to get the compliance issue passed versus actually trying to create something meaningful. And I think one other thing that really happens a lot is it's just kind of marketers, which I'm sure there's none listening here, so I won't offend anybody. They tend to want pictures on there and images to make things pretty and look cool and do all that kind of stuff, when in reality nobody really looks at that stuff. And so, sometimes those images are there and they really have no purpose except to try and make the page look better. So there's no function to them and we don't really recognize it. So that's when we get those, those pictures that say person smiling on the screen.

>> Cole Schlotthauer: 5:31

Yeah. Can we talk a bit more about like, the types of images people will encounter on sites and kind of their relation to alt text practices?

>> Virgil Carroll: 5:39

Yeah, I mean, you know, if you look at it from a WCAG, which, by the way, if I didn't say this before, WCAG stands for, web content accessibility guidelines. Hopefully anybody listening to this podcast knows that and is using and working with those, if you use tools like Wave or Lighthouse or anything, you're going to get reports obviously, on things that you violated around those standards. but, according to WCAG, there, there's really two types of images, but for our purposes and for what I think is more important, I'm actually going to call out three. One kind of in the middle there. The first one they call out is what's called a decorative. So if you look at the image that we just shared on the screen, this is your typical cliche, everybody's in a meeting looking, at it. You got the people sitting around a table, you got the person standing up and showing some type of graph, showing some kind of numbers, and, well, it looks like they're clapping, but this is probably one of the most cliche images you see out there in the stock art world. And so if I was to see this on the page, most likely I would just think, well, this was just here for some decorative means and just to add some, some pop, as people in marketing would like to say to the page and, and do that. So the good news is, in accessibility guidelines, you have the way to be able to call out an image as decorative. Otherwise, the image is just there to make things pretty and really has no meaning or power in the page. And you do that by basically, still adding the alt tag to an image, inside the HTML. But you're making that a blank alt tag. And what that tells it is that that image doesn't really matter in that. But on top of that, there's also a role you can add to that image tag called presentation. And that's another way. Now, that one's not quite so widely adopted. It's kind of part of newer standards from WCAG. But overall, it's something that can let the person using a screen reader know that this is not really an image that I need to worry about or pay attention to. And I can just skip the second type of image that I would call it. I gave it my own name and I called it practical. And so you look at the same image, you say, well, what if this was actually, an image of the employees, at the company that had this on their web page, and they're sitting around listening to a presentation from somebody on their sales numbers or something? So this now, and the content is really talking about how they were attending this presentation and what was happening with their sales numbers, and that kind of stuff. So now this actually has some context to anybody, viewing or reading the page content. So now your biggest difference is now you're going to actually add an alt text, but you want to give a good descriptor. And so this is kind of that balance of, you know, doing people sitting around a table watching a person. Yeah, that tells you what the image is, but here you have an opportunity to give more context around it. So you could do an alt text, like, say, employees in a meeting, clapping at the latest sales trend. So not only have you said that these are employees at the company, but you've also kind of given some emotion behind it. Otherwise, they're clapping, hopefully in excitement at the latest sales trend that's being presented there. So you're adding some context to that. So instead of this image, being something that was actually critical, to the page, it's something that's supplemental inside there, and the third type is really what we like to call informative. And so this is actually a WCAG standard, which just really means it's something that actually plays a role in the story that's being given in the content. And so now, looking at the same picture again, what if this was Stacey from the organization, and she was sharing the highlights of the latest sales trends and showing just how they had increased their numbers by, like, 25% over the last, year or something like that? So now you have a lot more context around this. Well, now that this actually looking at the graph on the picture, it actually plays a role in the content story. You want to kind of take it another step. And so there's really two things you want to do here. Number one is you want to add a much more descriptive alt text, and then inside the content itself, you want to relate that to the picture and make sure. So here, you could do something like, you could have an alt text of, like, figure three. You don't necessarily need that, but that's something great. Employees listening to a presentation on the latest sales trends. But then you could add something in the content, like, say, in today's meeting, as seen in figure three above, Stacy shares insight into the latest sales trends and shows a graphic on how sales have increased by 25% from September 2023 until August 2024. And so now you've actually made the image very, informative. And for anybody using a screen reader, they're going to understand what the image is conveying as part of the content story.

>> Cole Schlotthauer: 10:36

Got anything to add there, Chad?

>> Chad Heinle: 10:38

Well, I think, one word that popped into my head as you were talking there, Virgil, was meaning, you know, is an image meaningful? If it's not meaningful, then is it, ah, just there for decoration. I think that that's just the word that was rattling around in my brain a little bit.

>> Virgil Carroll: 10:56

Yeah, no, I agree. I mean, I think that's the overall thing is that again, so many people kind of do this as a requirement versus really trying to give meaning and actually realize that this is somebody that's utilizing a screen reader is trying to gain the same context of your content that somebody that is looking at visually on a page.

>> Chad Heinle: 11:17

Well, and the one thing you just said there too, about context is important. On two different pages, this image could mean two different things. So having unique alt text for it based, on the rest of the page is also important.

>> Virgil Carroll: 11:32

Oh, that's a great point too.

>> Cole Schlotthauer: 11:35

Yeah, some good tips there. so what are some other good tips when it comes to adhering to the best alt text practices?

>> Virgil Carroll: 11:42

Well, I think first and foremost, and this doesn't only go to alt text, but this really goes to inclusive design in the first place. You really need to make inclusive design inclusive into your content lifecycle. So from start to finish, when people start building content for whatever it is they need to be, including those inclusive design practices. And for a lot of organizations, that can seem very overwhelming. But it's so beneficial when it's part of the entire content lifecycle and you're really thinking about it through the process, because not only are you including a much wider audience in who you're trying to really promote your products to or whatever, but you're also making sure that you're not missing some of those gaps that sometimes come up as we kind of make these additional things versus just individuals. And, you know, one we've harped at already is really adding image context. So making sure that the context is clear. As a matter of fact, one, thing that I always recommend to people when I talk to them about this is having them read the alt text back to themselves and saying in the context, if you could not see this image visually, could you put, an image of that in your mind on what that image is actually talking about. And if you can't, then you want to kind of adjust. — Good one! — Yeah, you want to adjust it so that it makes the most sense. You don't want to go crazy and add like two paragraph alt text, but you want it to be descriptive enough that people can actually understand, what is there. And then, of course, the last one, I would always say, is make sure that you're really thinking about the purpose of an image and whether you really need it there a lot, or not. that's always something that's very important from the standpoint of us, really. we tend to go image heavy, and we're obviously going to go through a lot other episodes around images and around page load sizes and everything else like that. They kind of go into bad practices. I mean, Chad can tell you when you start talking about that the less images are always going to perform better when you're trying to display something to, well, really almost anything, it's true.

>> Chad Heinle: 13:43

But, you know, on the same flip side of, the same token there, having, those images, we understand also is also keeping that content engaging. instead of just being text on a screen, you're breaking it up, you're creating, some design element around it. So it's understandable. It's just kind of a how much to put in there can, be sometimes a fine line to walk.

>> Virgil Carroll: 14:11

Well, now you're talking about images that actually help support the content versus images there to be pretty. So that's just completely crazy talk, Chad.*laughs* And obviously nothing targeted towards any marketers. I know.

>> Chad Heinle: 14:23

Absolutely not.

>> Virgil Carroll: 14:24

Well, hey look, it looks like we actually made it and that so, — Not bad for the first episode, eh? — Yeah, I think the first episode went pretty well. I feel pretty good about it. And, I think we have a lot of other exciting things to share with everybody. So thank you, everybody for joining us. We really appreciated you, coming aboard and, hope you'll continue on with our next episode. Just a reminder, we'll be dropping new episodes every two weeks. if you enjoyed the discussion today, we would appreciate it if you hit the like button and leave us a review or comment below. And to listen to past episodes or be notified when future episodes are released, visit our website at www.discussingstupid.com and sign up for our email updates. Not only will we share when each new episode drops, but also we'll be including a ton of good content to help you in discussing stupid in your own organization. Of course, you can also follow us on YouTube, Apple Podcasts, Spotify or SoundCloud or really any of the other favorite podcast platforms you might use. Thanks again for joining, and we'll see you next time.