This course has been updated! We now recommend you take the Website Accessibility, v2 course.

Check out a free preview of the full Website Accessibility course:
The "Alt Text" Lesson is part of the full, Website Accessibility course featured in this preview video. Here's what you'd learn in this lesson:

Jon reviews tips for writing quality Alternate Text, or Alt Text, which is an HTML attribute that is apart of the image element.

Get Unlimited Access Now

Transcript from the "Alt Text" Lesson

>> Jon: So let's talk about screen readers and let's talk about the accessibility stuff that's important with screen readers. I think probably if you ask people what they know like technically on accessibility, the number one thing is Alt Text for images that gets said. Despite that, it's still one of like, it's just something that I see everywhere.

[00:00:19] That images don't have alt text, so for those that don't know, it's a property of the image element and you can specify any string. Inside this alt attribute and so just to give a little kind of demo. So, if this is your website and you just have an image with an image source in it.

[00:00:38] And you go, and you're tabbing through the website or you focus on the image or you're just using a screen reader to read the whole website. Essentially one of two things is gonna happen, most of the time it's gonna tell you an image. And seeing that there's no alt text, it's gonna read the file name to you.

[00:00:54] So it'll be like image gwash.jpg or something like that. And so what your users here is gwash.jpg image, and the cool thing with the screen readers is that they do read to you, which is really nice. But for this like where we're all together if you don't have headphones they also print at the bottom of the screen everything that they're reading.

[00:01:15] So you can just use them visually. So then if we go ahead and we add something like George Washington Portrait and then you go back and you refresh the page. Now you get this really great amount of context, George Washington Portrait and image. And so these are just some examples.

[00:01:32] I was doing a conference talking accessibility a while ago. So these three sites that are very popular don't have alt text. This is not actually up to date cuz Twitter just added alt text as an option. They don't have all text, which makes sense because they're user generated content.

[00:01:48] But they also, for the sake of collisions, they really hash their, like, they make unique file names. So just imagine being a user on a screen reader, and getting one of these, you know, like 172428, and Facebook, they're not even really images. They're like p to p files, that either they do some stuff, you know, and Twitters are hashed.

[00:02:11] So again, like keeping in mind freeze, some stuff are really challenging because if you have users uploading their own images. The best you can do is you can kind of suggest, give them option to add alt text which Twitter now does. It's behind an option settings but, every time you upload an image, you can give an alternate text as well but just keep it in mind what that experience might be like.

[00:02:31] So the four rules of writing good alt text. Be accurate, be succinct, don't be redundant, and don't use image of or graphic of because that's going to be taken care of. That's like one of the big boo boos that I see is like image of George Washington, image or something like that.

[00:02:45] It just falls into don't be redundant. But anyway, so these are the techniques and there's a link at the bottom They have a bunch of great example of what could alt text.
>> Speaker 2: You're supposed to cram everything in for sco.
>> Jon: These are good points so one of the worst things to happen to accessibility is that.

[00:03:05] The field of SEO is trying to find flaws in Google's algorithm and exploit them, right? That's what you do when you're doing search engine stuff. So people in Google launched their Image Search. Like Google was like, cool we're gonna scrape the image and look at the alternate text if it's there, which describes the image.

[00:03:21] And we'll use that and so then people are like this is the best, you upload a million images of whatever. But every time you upload an image you put in Britney Spears or free student loan reduction or something like that. And so then, it became a super huge mess where and still actively encouraging people to cram.

[00:03:40] So, if you're writing a blog post on like make money working from home and you upload a picture that's like a lady at the computer you're still for SEO supposed to put in like make money working from home easy free.jpg and then and as the name and then also as the alt tag.

[00:03:56] It's like so bad. And honestly it doesn't even help all that much anymore, because Google's kind of like plugged that hole, but people still do it. So yeah, think about your users, not your search engine rankings, and yes, don't cram it full of. It kind of reminds me of the days when you would put white text with a white background with all your keywords in it, that was like SEO, imagine that for a screen reader.

[00:04:17] They're like reading your blog posts and of a sudden there's like. Just a list of keywords for like a mile, that's too bad. Some interesting things, if you're not going to have alt text and you want to be nice to your users and let them skip the element, skip the image because there's nothing there, you can't leave it without and alt attribute.

[00:04:40] You need to give it an empty string for the alt attribute. So, an image with an empty string just gets skipped. So, this is great for user generated content if you can't put it in, at least put an empty string in there so it gets skipped. And then be careful slash know to use this, UPPERCASE words are gonna be read letter by letter.

[00:04:59] Capitalized and lowercase words are fine, they'll be read as words. But you know sometimes you want that, like MIT or something like that. So yeah. The big one is that first one. Like if you can't have Alt text, at least make it empty so that users aren't listening to file names be read aloud.

[00:05:15] Cool. More check marks off our list. So basically, for both text, audio and video there should be just some ways of reading. So, for your videos, you need close captioning, your images need all text. And a lot of great services like all text is pretty easy to do yourself and then, services like YouTube offer close captioning for free.

[00:05:36] Theres like a lot of really cool stuff and I've even seen some really great strides lately like at conferences, they've started, there's free program out there that are like, you attach to one of your speakers, and it will go ahead and it will like. Produce pretty accurate close captioning in real time of the conference talk or things like that.

[00:05:53] As so this like some really cool stuff you can do there. Some more check box system. And then another thing that you wanted do sometimes if you want to hide something from screen readers. Screen readers don't read anything that's display non visibility, hidden or input hidden. Again, if you want an image skipped over, it's really nice, you can just go ahead and give it an empty alt, but then if you just want things hidden, know that doing any of these things will also hide them from the screen reader.

[00:06:23] So, they're pretty good at keeping up with what you would do to visually hide them. But you will notice on Frameworks Foundation or bootstrap. They'll have some classes that are very specific. Like visually hidden means it's not going to be hidden from a screen reader and then hidden would be hidden both ways.

[00:06:42] So then, you can kind of do the opposite, hide it from a user but show it to a screen reader. And then with everything with CSS, there's a million approaches on this. I think this is one of the most common ones. This is what we used at Twitter.

[00:06:53] So, you get a position absolute, you knock it way off the screen, but, you give it one-by-one pixels so it has some size to it so the screen reader will read it. So, it won't render because it's way off the screen a thousand pixels, but it'll be read.

>> Speaker 3: It's essentially the approach you were using in one way or another for the skip navigation.
>> Jon: Exactly.
>> Speaker 3: I don't know if this is still an issue, but going back to the outlines in browser sometimes when you shoot something off the screen you get a really ugly dotted line.

>> Jon: Yeah, I think they've all, because this is used so often, I think all the main rendering engines are really good at handling a one pixel element off the line. It did used to be big and it also would like yeah, it caused them to like. They'd be looking to render that whole.

[00:07:40] Cuz you've just made the browser, or the window, like 1000 pixels wider, right? I'm pretty sure there's not a performance hit, or not a significant one, to doing that anymore. And I looked at a couple of different frameworks, and it seems to be a pretty agreed-on best practice.

>> Speaker 4: I think bootstrapping's clip.
>> Jon: Yeah, so there you can use background clips. Yeah, you can use that too. Again there's a gambling in different approaches but just knowing at if something has a little bit of size and be read by screen reader, you could visually hide it by like either clipping it or knocking it of the screen.

>> Speaker 5: Jack in the chapter that says, an example of why you would want to skip an image by setting the old attribute to empty strings. Is, if the image is purely decorative or otherwise does not add any meaning.
>> Jon: Absolutely, that's a really good point. So yeah, any presentational images that are just, you have a wreath lining your blog post Poster, something that's like a design-only image.

[00:08:31] That would be a great opportunity to. So yeah, it's good to keep in mind, user-generated makes some sense. But also, sometimes you'll intentionally leave one blank because it's not helping the page any. So, good point.