Alternative Text & Captions

[00:00:00]
>> I often find that for folks that don't know a ton about accessibility but are just getting started, that alt text is one of the most popular things people hear about when they think about accessibility. And we talked about it a little bit before, but the idea here being that when a screen reader encounters an image by default, if you just have image source food.jpg, it'll read the file's name to the user, trying to be helpful.

[00:00:23]
So this is kind of nice sometimes if you name your images properly. if you have one that's cutepuppy.jpeg, then it'll read that out loud. But it gets really tricky with websites that allow users to upload their own images, right? So if you run a web app like that, you always have to come up with unique names so there's not collisions.

[00:00:42]
So you end up doing things like hashing these images. So I pulled some examples from Flicker, Facebook and Twitter that can show how bad things can get, right? So these are all of course understandable, that they would give these unique number and string names to the images. But just imagine being on a screen reader and you're tabbing through or something like that and it says image of 17242890, just starts reading this stuff.

[00:01:07]
Or even worse like this Facebook one which is a PHP file with a bunch of stuff at it. So it's an important thing to keep in mind. So adding an alt attribute to these will cause the screen reader to read whatever you put in the alt text instead of the file name.

[00:01:23]
So here's an example here of an image with a really long kind of hashed file name, but we say a puppy in the park. When the screen reader hits that, it'll just say a puppy in the park. It won't read that name. And then the other thing to keep in mind, so if you have an image and you made that image, you're uploading it, add alt text yourself something descriptive.

[00:01:44]
Remember, you don't need to say a picture of because the screen reader will do that. It'll tell you it's an image. So just say what's in it. However, back to the users uploading stuff, there's gonna be a lot of times building web apps where you don't know what's in the picture when you're coding, right?

[00:01:58]
So if a user can upload a picture to Facebook, Facebook doesn't know what that picture's going to be. And so those times, if you don't know what the picture is, you have kind of two options. One, you can put something in, something generic, user uploaded content or something like that.

[00:02:14]
Or two, you can put in an empty alt text. So, this is different than no alt text. So alt with an empty string will cause the screen reader to skip over it not reading it at all. This is also really valuable if you have images that are decorative.

[00:02:28]
Say you're making a website with some really nice rounded corners that are pictures, PNGs or something like that. Putting an empty alt on those will make sure screen readers just totally ignore them and know that they're decorative images. And then the last thing with alt text, which we talked about a little bit before is SEO.

[00:02:45]
So search engine engineers also really want in on that alt text because search engines crawl that alt text and use it to help rank your site for whatever keywords you're looking for. And so for years SEO shops have been stuffing keywords into that. So again, you'll upload a picture of a family at the beach.

[00:03:05]
But your blog post is about saving money on car insurance. And so the whole alt text will say, hey, save money on car insurance instead of a family at the beach. And just a little bit helpful for your SEO but really difficult for accessible screen reader users. So I would really encourage folks, I know Google has devalued the ranking of this alt text over the years, to still do the appropriate alternative text.

[00:03:31]
I also think that there's ways that you can kinda settle both. I'm often thinking when I'm writing blogs, like a marketing blog or whatever, it's like well I needed to be descriptive, right? It has to work for screen reader users. But I think you can also kind of move the words around, just maybe a family at the beach having just saved money on car insurance.

[00:03:50]
I don't know, something like that right, that you can do for everybody. But I would say the big priority would be making sure that it reads well for screen readers. But this is one area where there might be a little bit of bumpiness at your company. Again, looking at the webAIM recommendation from the last section, just covering what we've just covered here.

[00:04:08]
So there's only one conformance level. It says images form image buttons and image maps need alt text. Images that don't convey content should have an empty alt text like we covered. And equivalent alternatives to complex images are provided in text which we didn't really cover. But if you have something that you need, that's very vital for the blog post or the page that you're on, one solution that you can do is you can have the image, empty alt text.

[00:04:36]
So that is hidden from screen readers but visible to sighted users, right? And then right underneath it, you can have a DIV with some content in it, but make it visually hidden. So that is visible to the screen reader, but hidden from vision users. I'm going to pause that one, make sure it makes sense.

[00:04:53]
So you can basically do the opposite approaches. You can have an image that you hide from screen readers and then some text that you hide from non-screen readers. Hope that makes sense, and we can kind of cover and approach on that in the next section. Awesome, and then the last thing, in the same vein of images need alternative text, audio needs captions.

[00:05:18]
So remembering that not all content on the web is visual. If you have video content, be sure that you have captions for them. Some places like YouTube provide auto captioning, which is awesome. Other folks, like I run a JavaScript conference, and we just pay for a captioning service.

[00:05:33]
They're really great. They're affordable. They listen to the talk in real time as they're going and then they just caption them put that up on a screen. So there's something to keep in mind if you're doing events, if you're doing videos, if you're doing any kind of audio content.

[00:05:47]
Some type of transcript, some type of captioning service. And this one which we covered already. This one actually does have a few different levels, as we saw on the webAIM site. But just for level A, a transcript of content is provided. You could do synchronized captions for non-live video.

[00:06:04]
So if it's not streaming live, it should have captions already there like YouTube does. That's all for that, that's all for screeners.