Alternative Text

[00:00:00]
>> One of our basic things, like I mentioned in the beginning that a lot of the accessibility issues that are out in the world are fortunately the really easy things to fix, a kind of an optimistic way of looking at it. Alternative text is one of the biggest.

[00:00:17]
So for any image or graphic on the screen that has content that we want to describe, cuz not everything is worthy of that, we have to provide what's called alternative text or alt text. And let me stop you right there, it is not alt tags, a bit of a pet peeve of accessibility people is that it is alt text, caught myself.

[00:00:43]
It's not the tag, so the image tag becomes the image element using those platform APIs we talked about. So it becomes an image object, and the alt attribute is how we supply alternative text, for the most part. So there's an image on the screen of the file name of the image is the-big-one.jpg.

[00:01:06]
If we didn't have the alt text, and it just said the-big-one, no one's gonna know what that means. Cuz that's what happens is if we don't include an alt attribute at all, it will try to read the file name, which may or may not be informative. It could be cached, I mean, it could just be gibberish.

[00:01:26]
And I even have an example here of a data URI, data:image/jpeg;base64, blah, blah, blah, no one's gonna read that, it'd be terrible. So the risk of not including alt text is that it is just not anything that will communicate what's on the screen. So instead, this picture of a big pizza has the alt attribute of a huge pepperoni pizza.

[00:01:51]
And I took this example because it was from a quote from someone, a blind person that I'm friends with on Facebook. And they were really feeling left out that people weren't describing their images. And it was a pepperoni pizza was the example, they were left out of the joke.

[00:02:11]
And so we wanna include that context and describe what's in the image. Note I didn't use the word image of or photo of, I just said what's in it. Just describe it, be brief, be brief, but descriptive. It can be kind of an art, [LAUGH] creating alt text.

[00:02:30]
I will say, I mean, since that person wrote that, I think they work at Facebook. So it might have been part of an announcement of their API's for generating alt text automatically, which Facebook does now, but they're not that great. I mean it will be like, object may contain round thing or pizza, it's not very artistic, or, I mean I have a degree in photojournalism.

[00:02:55]
So captions are part of the content. So if we can supply alt text, we should, cuz we're gonna do a better job than AI will. So the risks are big, especially when it's like, that's just one image. But yeah, multiply that times how many times this happens all over the Internet.

[00:03:14]
And it is one of the top five accessibility issues is lacking alt text. Also, we should say, though, that not every image is going to be descriptive enough to require alt text, like the actual alt text content, we can skip over it. So there is a thing called decorative images.

[00:03:39]
Like if you have, I don't know, spacer GIFs or images of decorative borders that you somehow couldn't create with CSS for whatever reason. You're not gonna say alt = border, probably, I mean, you have to make that judgment call of, is this decorative or not? And if it is, you can have the screen reader not read out that file name by putting an empty alt attribute.

[00:04:07]
And there are some times when maybe this is what you wanna do because of what's wrapping the image. Like if it's in a button or in a link, you might change how you decide what to put in there. And for that use case, or any of these contextual decisions that you have to make, there is this awesome resource called the alt decision tree that will walk you through how to make these decisions.

[00:04:33]
So, does it contain text? No, okay, continue. Yes, and, and then you can go through these scenarios. Or, is it used in a link or a button? And so, this can be super helpful, cuz there's so many different scenarios where you have to decide what would make a good piece of alt text.

[00:04:55]
So some great advice, I have this one bookmarked also, so keep that one handy. And CSS background images are another case where, rather than image tags, you have background images generated for whatever reason. An example of how I came along this technique was actually working for Target on their annual reports.

[00:05:22]
We had a lot of data tables that were super stylized. And this was before we could use CSS grid and a lot of the modern style styling we have now. You can embed an infographic or a table, and then basically mark up behind it what is actually in it.

[00:05:40]
And so if you have a background image laying over that, you could even toggle the image on and off if you wanted to let people choose which format. Do they want the stylized one, or the actual data table? You could let them choose. But if you wanted to sort of mock up the alt text behind the background image with way more content than you could possibly fit into an alt attribute.

[00:06:03]
Cuz there is a limit, and, yeah, I mean, it's a string, right? You can't put markup in there, so if you needed to have a more complex alternative bit of content, you can do this technique. I have one here for the most popular licensed dog breeds in town from a police department.

[00:06:26]
And so you can mark the image, get that to show up, and make it responsive or whatever. And then you can put content inside of that element and give it a CSS class, visually-hidden is the one that I have in here. It's also called sr-only, or screen reader only, sometimes.

[00:06:47]
And this technique will clip that content and, basically, hide it visually, but it still gets rendered. There's that word again, it still gets rendered, so it will be part of the accessibility tree, we just won't see it. So there's our first mention of the accessibility tree. It comes up right away [LAUGH] for image alt text.

[00:07:09]
So for this technique, I used a role of image on the div that has a background image asset on it. And I'm describing it, so it's got the image role, it also needs a little bit of extra help to say what is the description for this image. And I pointed it to the ID of the content behind it.

[00:07:31]
So dog background text, and it's got an h2 in there. It's got a paragraph for this little subheader for the source of the Hutchison Police Department. And then I described the graph, graph with six bars showing different dog breeds and all of their different rankings. And surprise, the labrador retriever is the most popular.

[00:07:54]
[LAUGH] So it's cute doggies, but you could use this technique if you have background images that you need to describe. And as I mentioned, having a toggle to actually show the table. If it was more tabular data than this, I described what was in it in this case.

[00:08:11]
But sometimes you might really have figures and tables and all that stuff. Hopefully you can style things pretty well now. Just know that there's alternative ways of presenting information. And then I mentioned the Facebook AI alt text, cuz that always comes up, people just want to not do it.

[00:08:32]
[LAUGH] So can we have a computer do it for us? You could try, but as I mentioned, an alt text attribute of image may include adult female with child, outdoor scene. That's better than nothing, but if it said something like, a woman carries her daughter on a colorful autumn walking trail at golden hour, which one sounds better?

[00:08:56]
Personally, I think having more capturing the essence of what is in a photo. You're thinking about the person reading it, not just letting the computer generate some random stuff. There are some API's that you could check out. There's one called alttext.ai, and another one called automated-alt-text-api. I think where those become more relevant is if you did nothing, it would literally be hundreds of images with nothing, like CMSs, user-generated content.

[00:09:29]
You kind of can't get around it sometimes that something is better than nothing. And in that case, here are some APIs to maybe go down that path and see if it's viable. Just know that it's not gonna be the same, but we can't have artisan handcrafted alt text in every case.

[00:09:45]
So those are some trade-offs that we have to make.