Website Accessibility Exercise 3: Solution

[00:00:00]
>> Jon Kuperman: So, how is the third exercise? I heard some productive sounding chatter, and some Alex the screen reader voice reading out over some people. So that's awesome. So yeah, I guess we'll go over it real quick. This one when you get into the screen reader the stuff is kind of fun but there's also like a lot that could be done.

[00:00:20] So I think we're just gonna take the first pass over making it usable. But there are a lot things, and we kinda talked about some really good points before we broke for break about described by. And all the different ways you can use labels to make forms really awesome.

[00:00:36] But I think for now we're just gonna make it usable.
>> Digital Voice: Reload this page, screen reader's web content. You're currently on web content, to enter the web area press Ctrl+Option+Shift+down arrow.
>> Jon Kuperman: Cool so this is a voice over. And so basically there's a couple ways you can get started.

[00:00:54] One of the easy ways is just using the website like you regularly would. So I can just hit Tab to see what I can interact with.
>> Digital Voice: Visited link back list one item.
>> Jon Kuperman: So I see a back button and then we get into the really useless stuff right.

[00:01:10] Which is like, even though this form looks great with these paragraph tags and things like that. When you actually are using the screen reader, it literally gives you no. It just says edit text, blank.
>> Digital Voice: Edit text blank. You are currently on edit text blank.
>> Jon Kuperman: And so you can just kinda tell right away, if you can't see then this form is completely, you can't figure this form out.

[00:01:32] I mean the only real option you'd have it you could send it into a mode where it reads everything. And then you can try to remember the order. And be like okay, there were four inputs that I heard and they were name, email. You know what I mean?

[00:01:42] Things like that. But you're really putting a lot of pain on your user at that point. And then similarly with the.
>> Digital Voice: Edit text. Daily menu item.
>> Jon Kuperman: WIth [LAUGH]
>> Digital Voice: Pop up button
>> Jon Kuperman: With the select, since it doesn't have a label it doesn't really tell you what it is.

[00:01:55] I mean, you have no context. Daily what? I mean, it says it's on select and you're on daily. I think you can just pretty easily imagine the frustration of trying to fill this out. And especially like I mean, you know, I've just been doing the accessibility stuff for a while.

[00:02:08] And I just like hear these stories about. You know what I mean stuff that people are trying to like make a purchase or trying to like sign up for a service or something like that. And like, you know not having that stuff is like, it's hard for me to imagine going online to sign up for Netflix or something and it being literally impossible for me to get.

[00:02:28] You know it's that frustration, is like is a lot. So we can fix a lot of these pretty simply. We go ahead and turn voice over off for now. So basically if we go into the code and we go into the screen reader index dot html. I'm gonna go ahead and hide this.

[00:02:45] The first big thing that I would do on my paths is I would just turn these paragraph tags into labels for their appropriate form control. So you can just give each label like an ID. And then you can turn these paragraphs into like label four, whatever that idea is.

[00:03:03] And so even if we just do this one example, label for email, email address. And then if we went back over here and turn the screen reader on again.
>> Digital Voice: Content visited email address, edit text.
>> Jon Kuperman: It's just so much better, right? It's telling you that it's an email address, edit some text.

[00:03:22] So we can go ahead and we could do that for all of them. So we can go ahead id = name. And this is a pretty quick pass through all this stuff label for name, something like that, cool. And then how often would you like to receive email.

[00:03:40] This is like probably one of the big ones because it was just not, not telling you what it was frequency I think I called it, or something like that. Label for frequency. Cool. So we can do some stuff like this and then basically now if we go back to it with it unmuted.

[00:03:56]
>> Digital Voice: You have reloaded this page. Screen visited. Link, email address. Edit first and last name, edit text, daily, menu item, edit text daily.
>> Jon Kuperman: Something's wrong here, hold on.
>> Digital Voice: You are currently on a pop up button, inside muting.
>> Jon Kuperman: All right I might have to, I'll look into that one offline.

[00:04:09] But basically we're just gonna do is I'm not sure what's going on with it. But we'll add ID's to these form elements and then we'll add labels for them. I've got something going wrong here but basically we'll do that. The other thing that you'll need, this is pretty contrived.

[00:04:27] But it says what is in the above pictures. So there's a couple different things we could do here. The first thing that we wanna do is like we mentioned, we'll go up to that image and we'll just add some alt text to it. That you could just say like cats, or for cats, or something like that.

[00:04:44] So at least when you're reading the whole document you'll get there. There's some other cools stuff that you could do. Again, getting kind of subjective you could use some of that ARIA, describe by or label by stuff. To like kinda connect to that security question with the image.

[00:04:57] So you could say like you get the image ID. You can could say the described by that thing. And you can start making these. I mean, that really up to you like just trying to visualize a workflow and just kind of sticking labels and descriptions on stuff. But that might be a cool way to go through it as like to be like, what's the security image above image of cats or something like that.

[00:05:16] However you'd like to do it. You know, might be nice. I wanted to do a little bit more on security because one of the big. I'm trying to like keep like a little bit of a running list of like the big accessibility problems that we see. So like one of the big ones is like, we did the divs with the class of button, that's a very common one that you see.

[00:05:36] Another one is alt text for images, another common one you see. A third one which is really important is CAPTCHA's are often a big stopping point for people with a number of disabilities. The big thing behind CAPTCHA's they just really don't do anything good for you. They don't really prevent all that much spam.

[00:05:53] They're really easy to hack and they often don't, even if they offer some kind of audio replacement. It's often not accurate enough. Often the numbers you need to enter won't be. Or oftentimes they'll put distortion in the background of the audio as well. There big blocking points. So if you have a website and it has some kind of CAPTCHA on it, I think it would just be worth considering, like can you remove it.

[00:06:15] Can you find another way of preventing spam without preventing legitimate users. So this is like a very contrived, this isn't a real CAPTCHA. But I did want to make a point, a special point for CAPTCHAs because I think a lot of people struggle with them.
>> Speaker 3: I have a question before you move on.

[00:06:31]
>> Jon Kuperman: Yeah.
>> Speaker 3: I just going back to the screen reader, because I tried to just turn my screen down to use it.
>> Jon Kuperman: Yeah.
>> Speaker 3: So when you go to the select thing is there a way to get it to read you all the selections?
>> Jon Kuperman: Yeah, so-

[00:06:43]
>> Speaker 3: The only way, I figured it was like you just hit down arrow and then when you select it tells you what it was but it wasn't like it gave you the.
>> Speaker 4: It does tell you how many options there are?
>> Jon Kuperman: Yeah so I think by default the select will tell you that its a drop down and how many options there are in it.

[00:06:58] As far as reading all of them. I'm trying to think, Jack do you have a suggestion on that? So with selects they'll tell you how many items are going to be inside the select. Is there a way to get, I mean I can think of a way with like labeling and putting all the options int he label for it.

[00:07:14] Like this is a drop down with these choices but that's like duplication. Is there a way to read you all of the options so you don't have to.
>> Jack: Not that I can recall-
>> Jon Kuperman: So one thing I've seen down before with any templating languages is you'll just use the same list of, the list that you populate those select with.

[00:07:32] You'll also populate the label with or a described by. So that will get you there even though it is a little bit of duplication. I think that would probably be the best thing to do.
>> Speaker 4: Well I mean if you're using code to-
>> Jon Kuperman: Well, right, yeah.
>> Speaker 4: Discription.

[00:07:44]
>> Jon Kuperman: But if you're just using HTML then it would just be like a direct copy and paste, but that would be a nice thing for users. So maybe an ARIA described by, and then you'd have all of them in there something like that. Something like that.
>> Speaker 3: And the other thing is when you type in like to fill itself.

[00:07:57] It's trying to read it to you as you type but is there a way to get it to just like say, I wanna read what I typed.
>> Jon Kuperman: Yeah, so the next example that we're gonna do is covering a little bit of that stuff. So there's this concept of like ARIA Live Regions.

[00:08:12] And some different things which is like how the screen reader can react to things changing. So there's some cool stuff you can do in there, and we have an example that's pretty similar to that for our next one. But yeah, it's like, this is where I try to it's kind of endless.

[00:08:27] Just all the cool stuff you can do. So yeah, that is definitely a big thing. When should the screen, now that you have a screen-reader communicating with a user, when should it update them? Every character that they type or only when a time out has exceeded, different things like that.

[00:08:42] And it gets back into, somebody had a great question about form validation. Which is another kind of big topic where you cover like when does it validate. And how often does it announce to the user if something's invalid or if it's, you know what I mean you kinda get into this.

[00:08:56] So yeah, when we do our live regions in the next there's funny, their modes are like assertive and polite. So you can control different things like, should you wait until the screen loader is done saying its current thing and then let you know? Or should it kind of take precedence and interrupt that something's changed?

[00:09:14]
>> Jack: I think the best way you can make decisions around that, to be honest, is just implement something and turn it on and try it. Because you're gonna hear very quickly if it's just a bunch of garbage or not.
>> Jon Kuperman: Yeah, and I think the more stuff you have going on the worse it can get.

[00:09:32] But yeah, I think the best thing to do with all these nice, free screen readers is just have someone in QA, or the developer. Or somebody just try filling out that form or living on your app for a minute. And see if it's like everybody yelling or if it's just a pretty easy to follow thing.

[00:09:47]
>> Speaker 6: Beyond all caps or not, is there a way to suggest pronunciations for like weird words or-
>> Jon Kuperman: I don't know, that's a really good question.
>> Speaker 6: Another thing I-
>> Jon Kuperman: Made up words, right?
>> Speaker 6: Right.
>> Jon Kuperman: How would you pronounce your company name or something if it was.

[00:10:03]
>> Speaker 6: I think something as simple as times I've been working with a lot lately, if you all caps the AM PM that helps. But it seems of read out individual digits sometimes, which to me is not very user friendly.
>> Jon Kuperman: So some of that stuff you could do, since the labels are essentially kind of strings.

[00:10:25] I mean you could do some of that with a JavaScript library could format it. And then you could take that timestamp, and you could pass it through moment.js or whatever. And you can control how you read aloud, so you can say like. February 22nd 1 a you know right, you can change it into words, basically.

[00:10:41] As far as pronunciation, it's a really good question. I don't know of anything.
>> Speaker 7: So I mean there's kind of two camps. Some folks have tried to for example, if it's going to be something, that would only specifically be read by a screen reader provide a phonetic.
>> Jon Kuperman: Right.

[00:10:58]
>> Speaker 7: Spelling, but feedback that we've also gotten from the disabilities community is most people that have been using screen readers are used to the mispronunciation so they're like don't bother.
>> Jon Kuperman: Yeah, I've seen the phonetic thing I think before where you know you'd have a label that was like, kind of reminds of back in the days.

[00:11:18] Where that Mac to speech program, but you'd try to get it to say your words so you'd like. But yeah, I do agree that I think for company names and things like that, I think a lot of people are if it says Twitter they know what it's going for.

[00:11:31] But that's a really good question. There's also, I wonder, so they tie into the voices that your operating system has. And I actually am now wondering a little bit if, cuz some of the voices are accented. You can get British voices or I'm wondering a little bit if there's some cool stuff you can do in there.

[00:11:48] But yeah, I haven't really done anything like that. But it's a really good question.
>> Speaker 7: I think the one thing Like trying to do phonetic stuff, is that, becomes really hard to maintain over time. That's another reason to just not go down that road.
>> Speaker 6: Trust that technology that will better.

[00:12:02] [LAUGH]
>> Jon Kuperman: Yeah, I mean, I think that's a really good call. I think that I don't know, I think that would be really cool. I thing it would be really cool to mess with. But I do think that for those that use templating languages it's always nice if you can make your labels out of the same variables.

[00:12:18] That your place holder or your, you know what I mean those kind of things. Which that would get a lot more complex if you had a phonetic spelling as well. That's a really good question. Cool, so yeah, basic idea there is just. And I really think, I just can't say enough for actually turning on a screen reader and running through your site.

[00:12:40] I mean, I heard a few people like my goodness I can't hear what's going on. And just thinking about you make this really gorgeous, nice thing that is a joy to use. And then you take a significant chunk of the population and you don't make it so it works for them.

[00:12:57] It's just kind of a weird reality that we live in. So I think that's really important, really cool. And there are really, if you get some bandwidth to play with stuff you can really make the experience great. Like I was talking about before with your security question could like tie itself to the actual picture, with the described by so it reads it right after.

[00:13:14] You can do some like really nice things there. But yeah I can't just really say enough for actually like get on the screen reader. Put your headphones on and like try to use your website, cool.