Screen Readers & Alt Text

[00:00:00]
>> Jon Kuperman: Cool, so screen readers, they're one of the most pivotal pieces of assistive technology, one of the most well-associated concepts with accessibility. And in our previous exercise, we all got them installed and running on our computers, which I think is an amazing start. I honestly find even just using them for a little bit really helped build up my kind of understanding.

[00:00:20]
I remember specifically doing an accessibility talk years ago in San Francisco. And there was somebody went before me and he was giving his presentation, he was doing all these slides, all this live coding. And then at a certain point, he accidentally knocked his headphone, this is gonna date me a little bit, out of the headphone jack.

[00:00:37]
This is pre-Bluetooth headphones, anyway, and throughout the whole auditorium you heard his screen reader reading. Nobody knew that he was blind and he was doing the entire thing based off of screen reader back out to the keyboard. And so the kind of two amazing things were, one, he was able to do this incredibly robust live programming demo.

[00:00:55]
And two, the thing I think that surprises everybody is how fast the screen reader reading gets for people who use it every day, as we're starting and it's however many words per minute. And then you hang out with somebody who uses it all day, every day, and it is inconceivably fast sometimes, how fast the content is being read in.

[00:01:11]
How do screen readers work? They convert your digital text into synthesized speech. So they basically allow users to hear content and then navigate with the keyboard. So the user's input remains the keyboard and the kind of output remains this speech through their headphones or through their speakers. So this technology helps people who are blind or have low vision.

[00:01:32]
And ideally, when the website is designed correctly, it gives them the same level of independence and privacy as anyone else using the website in any other way. One thing that I just wanted to kind of hit home again when we start looking into semantic HTML is the screen readers don't just top to bottom read the website, they also offer a lot of navigation tooling.

[00:01:52]
So you can kind of jump to next section, view all the headers, view all the links, find the next input field, things like that. So thinking about your website in this kind of structure can be really important because screen reader users are often going to be sort of power users who are really jumping around your website and not necessarily just sitting there taking it all in one item at a time.

[00:02:12]
Screen readers display read all of the content aloud to the user. They also have the opportunity to display a list of links, display a list of headings, or navigate back and forth between these things. Popular screen readers, just in case you have heard of some and maybe not others, JAWS is by far the most popular, it's premium Windows software.

[00:02:29]
Coming up closely behind it is NVDA, which hopefully the Windows users got installed today. And then below that is VoiceOver, which is the one that comes default installed on Mac operating systems. A lot of these too, just to make a side note, have equivalencies in, let's say, the mobile world as well.

[00:02:48]
So VoiceOver exists on iOS, and then Android has its own screen reader built-in, so these experience is largely the same. Mobile provides some really cool additional things where you can have accessibility features tied to different types of presses and taps and things like that. But for the sake of this course, and it's going to be quite web specific, we're just going to be talking about desktop and laptop screen readers for web.

[00:03:13]
So some important things as we think about taking our website and making sure it will work very well with a screen reader. One of the most important, and probably the one that people have heard of the most often, is alternative text. So who's heard/worked with alt text before?

[00:03:27]
Okay, yeah, great. So the idea being that when a screen reader encounters an image, if we don't add alt text, it'll do its best to help the user by reading the file name itself to the user. And so,this can be okay. I mean, I think we can all start thinking about the screenshots and images we take and how often we name them something that we would like users to see, and it's not 100%, but it can be particularly tricky for generated images.

[00:03:52]
So if you have any kind of website that allows users to upload or automatically generate images, we know that we don't just name them what they are, we often hash the name so that there's no collisions. And you end up with these really, really long, and complicated file names.

[00:04:06]
So some examples that I kind of like to put up are, if you go to various popular websites and you inspect element with the dev tools, and you kind of take a look at what the images are named. And then start trying to imagine what it would be like as a screen reader user running into one of these images.

[00:04:21]
So Flickr has just this kind of normal hash name, 172428, is very complicated. Twitter does the same thing, they have this file hash.JPEG. Facebook doesn't even use images, they're PHP files, so as you can imagine, you're trying to see what the image is. The image is a cat, or a graph, or something like that, and it just starts reading out this 150 character PHP file extension, so this can be very difficult.

[00:04:49]
So it's quite easy to fix, and there's lots of different cool things we can do within alternative text. So the traditional case, let's say, is that it's your image, you're uploading it, and you're using HTML with an image tag to image source to it. You can go ahead and add this alt attribute here, and you can put anything that you want in there.

[00:05:08]
So screen readers will read that text instead of the file name. So instead of image KSJ, it'll say image, A puppy in the park. Some quick tips for alt text is, I see these kind of mistakes a lot, you don't need to say that it is an image of or a photo of, because the screen reader will read the image tag first.

[00:05:27]
And it should just describe what is actually pertinent in the image. But really take a second to think about what's pertinent because I also see a lot of people who do alt text graph, or chart, or something like that, and it's okay. But if this is a technical post and the important thing you're describing kubernetes cluster or something like that, just saying graph or chart is not going to get people enough information.

[00:05:50]
So really think about why you added that image and what it needs to convey to the user. We also have lots of cases where images are just presentational, right? So you can imagine a blog post and just to make your post look better, you put some abstract piece of art or something like that at the top of each image.

[00:06:07]
So it's very easy to instruct screen readers to just skip an image too, which is just by adding the alt attribute but putting in a blank string. So these are really great for anything that's presentational, where it's unimportant for users to actually understand what's in the image. It's just there to kind of make the website look nicer, designed better.

[00:06:26]
It's also largely, this starts getting a little bit subtle where if you have user generated images and you're not sure what they are, skipping over them is one option. But it would probably be a better option to put user generated image or something like that in there. But anyway, we have a lot of leeway here, so we can put anything we want in or we can put an empty string and force the screen reader to skip over it.

[00:06:49]
>> Speaker 2: Because we are talking about the image tag, how about the picture tag because you can have an image embedded within the picture tag?
>> Jon Kuperman: Yes, so with the picture tag, that's a great question. So the picture tag you can't add an alt attribute, but you can add either ARIA labelled by or aria described by to it.

[00:07:05]
So when we get into the ARIA section, there's essentially equivalent ways that do the exact same thing. So when the screen reader hits it, it will tell it what the description of that picture tag is. Yeah, really, really similar, that's a great question. One note here, this is an area where we sort of clash with another subindustry of development, which is SEO.

[00:07:24]
So search engines for a long time have made use of alternative text, and for many, many years SEO shops have suggested that you stuff keywords that you wanna rank for into the alt text. So I don't know if anybody has done any of this kind of web marketing or things like that where they recommend that you just take your Google keywords and stuff them into every picture, this is really difficult.

[00:07:46]
I think Google has largely turned down this signal, but it does still exist and I do still see it all the time where it'll be an image of a dog, and the alt text will be, best free headphones, Samsung deal on headphone, whatever it is, stuff like that.

[00:08:00]
So do keep in mind that I understand the temptation to boost your search results, but it's a very bad accessibility experience and it is the lowest level level A compliance that you need to have appropriate alternative text. So you could get into some legal gray area for having inappropriate alt text here.

[00:08:19]
This, for the future of this course, will be the kind of WebAIM screenshots that I use whenever we're tackling a standards compliance specific issue and webaim's kind of explanation of it. So instead of me just saying alt text is important, we can take WebAIM and WebAIM says here, in order to be level A compliant on the left and then here's a list of things.

[00:08:41]
So images need to have equivalent and appropriate alternative text. If they don't display content, they need to be the empty string like we saw. Alternatives to complex images can be provided in content or separately linked. Buttons need to have descriptive values like submit form as opposed to go.

[00:08:59]
Form inputs also need to have labels, these kind of things. So just kind of not necessarily needing to memorize this now, but this is the form that the course will take as we cover a compliance issue where we will have the equivalent WebAIM recommendation for it. Similarly, remembering not all content on the web is visual.

[00:09:17]
So while images need these alt text, audio needs some kind of captioning service. And again, coming back to the WebAIM requirements here, to be level A compliant transcripts of relevant content need to be provided for any non-live audio only files, like an audio podcast or an MP3. And a transcript or audio description needs to be provided for non-live video.

[00:09:36]
And then to be captions and other things for prerecorded videos, we have some other level A compliance issues, like synchronized captions need to be provided, and we have a link here to what synchronized captions means. And then transcript or audio descriptions needs to be provided also for non-live video.

[00:09:49]
So basically just kind of the things that we see a lot where if you have anything recorded, there's all sorts of like, you can get a human transcription service, you can use some automated tool with varying degrees of success. But you need to have some way of presenting this content in a visual form.

[00:10:10]
Does that make sense? So we've got the images needing, the alt text and the audio needing some kind of transcription.