Website Accessibility Accessibility Auditing 1

Transcript from the "Accessibility Auditing 1" Lesson

[00:00:00]
>> Speaker 1: I think we should do an accessibility audit of, yeah, we could do Frontend Masters.
>> Jon Kuperman: We'll warm people up.
>> Speaker 1: [LAUGH]
>> Jon Kuperman: I also did a Chrome Dev Tools audit of Frontend Masters last time I was here, so Mark's used to the scrutiny. All right, cool, so we're gonna run one of these audits here on the home page and see where we're at with things.

[00:00:22]
>> Jon Kuperman: I'm really starting to get the feel like something is broken with this reload page and audit function, right.
>> Speaker 1: It's just the site is so bad.
>> Jon Kuperman: No, no, the more I'm seeing is something is wrong. Yeah, okay, cool, I'll do it right.
>> Speaker 1: It just crashed.

[00:00:38]
>> Jon Kuperman: Okay cool so like so here is playing into something that we've talked about before. I really wanted to lean on like what's good for accessibility is good for everybody. So, one of the first things is that we've got some duplicate ids which are not allowed so we've got playing in name and auto bullet are both-

[00:00:56]
>> Speaker 1: That looks like actually something with our player, the video player.
>> Jon Kuperman: That's not from you I would say.
>> Speaker 1: Yeah that's the video player.
>> Jon Kuperman: I told you it's not always within your control unfortunately.
>> Speaker 1: Although we are creating a brand new player you can see that next up from the dot com.

[00:01:16]
>> Speaker 3: That's the one you should audit.
>> Jon Kuperman: Yeah alright, next. [INAUDIBLE] Yeah it's not always in your control.
>> Speaker 1: You didn't spell it.
>> Speaker 4: You need a T.
>> Jon Kuperman: All right everybody [LAUGH] So, one thing that's just as I noticed like things that I noticed a lot like anytime you have stuff that you embed like if you have a bunch of YouTube videos on your site.

[00:01:37] You running to that kind of thing a lot like duplicate IDs or duplicate scripts different things like that is pretty common. All right cool go back to edit action [INAUDIBLE] This is sweet, I haven't seen this yet.
>> Speaker 5: Are you logged in?
>> Jon Kuperman: No.
>> Speaker 1: I'll log into the main so I can [INAUDIBLE].

[00:02:04]
>> Jon Kuperman: My god. Some weird cookie stuff.
>> Speaker 1: [LAUGH] This is beta stuff.
>> Jon Kuperman: No, no. You're right, you're right, you're right. It's [INAUDIBLE] stuff. This is Might not be my password. It was my password. Okay, all right. Alright here we are. Okay so severe Mark severe we got work to do so yeah the first one is controls in media elements should have Some kind of label.

[00:02:41] So, you got the main video here in the center of the screen. It doesn't have any label for it, so as you're like tabbing through or something like that, it should have some kind of label, even if you visually hide it. Let's see.
>> Speaker 1: I'm sure there's like a Video.js accessibility, like a plugin or something?

[00:02:56]
>> Speaker 5: You can use [INAUDIBLE]
>> Speaker 1: Add on?
>> Jon Kuperman: Yeah, definitely. I mean, yeah, again, it's just for if you're tabbing through, you want the screen reader to just say. This is the video, maybe the video title or something like that. Okay, cool, so elements with ARIA roles must be in the correct scope.

[00:03:19] So, what is going on here? First of all, great job on having so many ARIA roles. I'm assuming-
>> Speaker 1: Yeah, I mean we're pretty much sticking to stock video, Jazz.
>> Jon Kuperman: Yeah. I'd have to look into this one. But conveniently, they always put a link to an explanation in the Chrome dev tools for why they're pegging you as something.

[00:03:44] Okay so the required context role defines the owning container where the role is allowed. Okay so bad, the listitem role must be owned by an element with role list. Okay so you can't have listitems without a list. So we've got something like that here, menuitems without a menu.

[00:03:59] Okay so all these different controls here are great because they have menuitem role, but you can't have menu items without a menu, can't have list items without a list. Doesn't seem severe, but it is [LAUGH]. Cool, elements of unsupported ARIA attributes, ARIA, let's see.
>> Jon Kuperman: Unsupported one. I think that, yeah has pop up is a real one.

[00:04:36] I think there's something specific. I'm not sure on that one either. That one's a little bit tricky. It's complaining that one of those is unsupportive. I think that's more.
>> Speaker 1: How is that severe if you have something that's unsupported.
>> Jon Kuperman: I don't know.
>> Speaker 1: If it can't understand it, wouldn't it just ignore it?

[00:04:59]
>> Jon Kuperman: I didn't make the school Mark, I don't know. Yeah, I think so, I think yeah, I'm not sure why that's severe. I'd have to look into that one more. I'm assuming that, it looks like what's going on. Cuz I think those are all three, they are supported attributes, but I think maybe not on the element or on the role type that it's being given.

[00:05:15] It can get a little bit finicky about that. And then-
>> Speaker 1: No alt text.
>> Jon Kuperman: Yep. So we've got some images that don't have alt text.
>> Speaker 1: What about that third one?
>> Jon Kuperman: What about, one, two. Elements with ARIA roles must ensure required owned elements. Yeah, so, this is like the opposite.

[00:05:32] I'd have to look into what's going, so these are complaining about the exact opposite things. This is saying
>> Speaker 4: What if those are the items that belong to that menu? They're just not inside of it?
>> Jon Kuperman: I think what's going on is that we just have a simple nesting issue.

[00:05:44] Because it's like, this is saying there's a ton of role menu items that don't have a parent with role menu. And this is saying the exact opposite. We've got two things with role menu that don't have menu items inside of them [LAUGH] So, I'm assuming it's just like-

[00:05:58]
>> Speaker 4: a It's a bunch of orphans
>> Jon Kuperman: A div nesting issue like maybe you have an extra closing div or something like that.
>> Speaker 1: Our lead developer Kai on the new player he's not tuning in so it's watching it live so.
>> Jon Kuperman: All right I'm gonna be even more polite.

[00:06:14] Cool text elements without contrast ratios so it looks like a lot of these settings ones. I can pop this out.
>> Jon Kuperman: Try to find where they are. Okay, so yeah so a couple of these links here, come on, I don't know why, anyway. A couple of these links don't have enough contrast ratio to them.

[00:06:42] So you could either run this through, like something like totally will point out which ones are low contrast or you could just pull the colors out of it and run it through that site. Cool, a couple of other little things. A webpage should have human language, so this one will have html class js which will probably have lang en on the html top too, just to be conformant.

[00:07:03] Video elements should use Track elements to provide captions. So, if there's a caption in the video, it should be inside a track tab.
>> Speaker 1: Yeah, we haven't implemented captions yet in the new player, but we will.
>> Jon Kuperman: Cool. I don't know. I mean, yeah, I mean, it is what it is.

[00:07:17] The severe seems a little bit severe, to call it, for some of those. I really think the biggest fixes in here are that, and I'd have to poke around a little bit more, but it looks like something's off where yeah, so this role of Menu has an, I see what it is.

[00:07:34] I think it's a nested ULs, I think is what's going on. But basically, so we've got all these Menu items that don't have a Menu parent, and then we've got these Menu parents that don't have Menu items. So just have to look at the cord a little bit closer, but I think they just need to be moved under each other.

[00:07:48] All right, we've embarrassed Mark and he's brought us all here. So, somebody's gotta volunteer a site and we'll, yeah.
>> Speaker 4: Can you look up the Kixer site?
>> Jon Kuperman: What is that?
>> Speaker 4: Kixer. Yeah.
>> Jon Kuperman: Is it with an e?
>> Speaker 4: I don't know, just Google it.
>> Jon Kuperman: Whoa.

[00:08:03]
>> [LAUGH]
>> Jon Kuperman: kickserv.com?
>> Speaker 4: Yeah.
>> Jon Kuperman: Sweet.
>> Jon Kuperman: I'll reach local product, cool. All right, so can I go back again? Whoa It made noise at me. Cool I'll go ahead and run it on here. Another thing to keep in mind with these is they are auditing the specific page that we're on.

[00:08:26] So if you have a app with a couple of big pages you'd want to run on those. Running Audit. Okay, at the same time, man this site is doing something really wild. You see these like rebounds?
>> Speaker 4: Yeah dude.
>> Jon Kuperman: Ten thousand errors?
>> Speaker 1: Yeah.
>> Jon Kuperman: Or sorry, a thousand.

[00:08:41] Okay, so let's take it over the
>> [LAUGH]
>> Jon Kuperman: There, I have a feeling there's something going on with this site, a little bit more serious. Like I think I'm just-
>> Speaker 1: You're just poking the bear.
>> Jon Kuperman: [LAUGH]
>> Speaker 1: What you doing?
>> Jon Kuperman: I'm happy.
>> Speaker 4: I don't know what it's doing.

[00:09:01]
>> Speaker 1: Woah.
>> Speaker 4: Woah.
>> Jon Kuperman: We got some issues. So it's fine and then something happens yeah, like there's some these are, wait I wonder if this is just, hold on a second let's take it in.
>> [INAUDIBLE]
>> Jon Kuperman: Let's take it over here, with no extensions on. It's still doing something really wild.

[00:09:26] Okay, so then I'll go and I'll just enable just the accessibility dev tools extension for incognito. And then we'll go back over here and see if I can, I might have to I have to make a new tab with that. Either way, just trying to get that one extension on with the rest of the extensions off, basically, cool.

[00:09:48] Now audit again, all right, still going crazy.
>> Speaker 4: Still going crazy. [CROSSTALK]
>> Speaker 1: I want you to audit then.
>> Jon Kuperman: Yeah, so there's a chance-
>> Speaker 4: Big.
>> Jon Kuperman: There's a chance, there's just something about the accessibility dev tool that's freaking out with this.
>> Speaker 4: Yeah.
>> Jon Kuperman: Because it wasn't freaking out before.

[00:10:05] So let's then try a different approach. Okay, so this found issues without the redirects. So we've got images missing alt attributes, cool logo, white two X. And all images missing all attributes, links with no texts inside of them. This one is tricky, I don't love this rule. Cuz this is very common to do, right?

[00:10:28] So you have an anchor with an image inside of that and the image is the thing to click on which will throw. It'll throw an accessibility, I think it throws an error with W3 validator, too. I think it does. They always want some type of text inside of a link.

[00:10:46] There's a couple of different things that you can do out of here. But the big thing is that the link then doesn't get a name to be announced. It's like, where is the link, what does the link do, where is it going? So you can work around it with, you can ignore that error and work around it with giving it a title or a label or something like that.

[00:11:03] You can also put some text it in and visually hide it so it still gets read but it doesn't get seen.
>> Speaker 1: So what about images being the sole element within an anchor and the all text of that. Would you want the all text to be descriptive of where the link should take you?

[00:11:19]
>> Jon Kuperman: Exactly, no that's, no that's exactly the problem. Like that's what it's complaining about. Cuz it's like all text should be like the image description, not about where it's going, right? You wouldn't want an image of an arrow with an alt text that said, check out, right?
>> Speaker 1: There is no alt text there, so if there was?

[00:11:36]
>> Jon Kuperman: So there are two different issues going on. One, the image should have alt text that says, whatever Kickserve logo. But then also, there should be either a label for the link or a syntax that's visually hidden in the link that says what it does. Like return home or something like that, right?

[00:11:53] And that's a really common one because it's a pretty common pattern to put an image in a link and call it.
>> Speaker 1: What's that one right above?
>> Jon Kuperman: This one? Image alt.
>> Speaker 1: Yeah, what is that?
>> Jon Kuperman: I think, let me see real quick. I think it might be too long.

[00:12:09] I think you get like 255 characters or something like that.
>> Speaker 1: Or just a spec of it of keyword staffing.
>> Jon Kuperman: It might be that too. Alt text limit, I'm not sure if they have a character limit on it. Anyway, I could do more research on that but yeah it looks like, so one thing that I'm not sure if this ran out of room or if there really isn't a closing quote on this alt text which might actually be the problem.

[00:12:43] But I would wager that it's either,
>> Jon Kuperman: Here it is, sorry, it's very long, alt attributes should be clear, concise, accurate. So, yeah, I think it's just extended whatever, it uses as a calculation for-
>> Speaker 1: I have relatively good example when to look at.
>> Jon Kuperman: Cool.
>> Speaker 1: IBM actually does a pretty darn good job.

[00:13:05]
>> Jon Kuperman: Just their main site?
>> Speaker 1: IBM.com, sure. Even just their home page.
>> Jon Kuperman: All right, a blank heading element. I wonder what they use that for. I'm gonna in a separate tab go to IBM.com and then I just wanna kinda see what this sucker's being used for.
>> Speaker 1: And if you looked at that like well structured headings.

[00:13:40]
>> Jon Kuperman: Yeah.
>> Speaker 1: I've got really for the most part they've only got one area where they actually have any contrast issues.
>> Jon Kuperman: Yeah.
>> Speaker 1: I've been doing some work with the IBM folks and they're [CROSSTALK] pretty into accessibility.
>> Jon Kuperman: Yeah I'm not sure what they're using this one for.

[00:13:58] [LAUGH] I can't seem to find it anywhere. It's somewhere inside here, so you go, okay. So they have an H3 window with content in it. Single iFrame without a title. Same alt text on multiple images. This one's really tricky to avoid sometimes, because it's, you'll have, like if you have a CMS of any kind, you'll have alt text associated with an image, and maybe you need to use that image twice, and then you get this error.

[00:14:22] So I wouldn't, I don't know that I would worry about it all that much, and so this is the same alt text being used on multiple images. Although, I guess what it's saying here, yeah, so here's where it gets tricky is that the images have different sources. So are these two appear to have the same source?

[00:14:42] Yeah, support learning lab and support developer works, both just yeah developer works probably not the best. They can have better than that, yeah but I do see somethings if you use Wordpress. With Wordpress you can put all text at time of implementation or you can add all text to the image in your media library.

[00:15:01] So if you're to do that and reuse an image twice on a page it could be problematic but, ya, I think this one just could be a a little bit better. This one, ya again, people do this one a lot. Link text is uninformative and it just says learn more.

[00:15:15] This is like I think a lot of U.I. best practices battling accessibility best practices. You know, people like, learn more is like a super common content hierarchy. And you put your title, your little paragraph, a learn more link. But for accessibility purposes, the link should be a little bit clear about what it does.

[00:15:33] Like learn more about IBM's video CTA or whatever, you know what I mean? Learn more about something. So I think that's kind of what it's complaining about-
>> Speaker 1: What's a recommended fix? What are they recommending for the fix?
>> Jon Kuperman: Don't use generic text. Use text that accurately and concisely conveys where the link goes.

[00:15:53]
>> Speaker 1: That's the problem. What's for it to know, that's not on the link?
>> Jon Kuperman: I see, yeah, yeah. I don't think I have a tenant account, but basically it's gonna suggest, I doubt it'll be specific enough, but it is gonna suggest just that. That you use some kind of actually specific, again you can get away, you can kinda maybe please both, by being like learn more about whatever the specific thing is.

[00:16:19] Link gives us an invalid hypertext reference what have we got here. JavaScript colon semicolon.
>> Speaker 1: Yeah.
>> Jon Kuperman: That looks like, I think that might be a bug.
>> Speaker 1: I've never seen that before.
>> Jon Kuperman: I've never seen that before either.
>> Speaker 4: I don't think it's a, look, it has something to do with a video.

[00:16:37] Video blog link [CROSSTALK] If you want that to do an action but not go anywhere?
>> Jon Kuperman: No, so that's fine, so you can do like JavaScript void for that, right? But what about, is this like?
>> Speaker 4: I think it's the same.
>> Jon Kuperman: I don't know, yeah, so we could look into those things, yeah, might be.

[00:16:54] I've just never seen that approach before. Yeah, so okay. None of this is like, I don't want to be like digging into people's dirty laundry or whatever but it's cool. It's like interesting, you can go to the sites and start getting some ideas and a lot of this stuff should be like really, really easily fixable.

[00:17:10] Which is like one of the point I want to drive home like this isn't like men like I need a, you know like we can figure my server to do blah blah. It gets really it is like go in and like remove this three, man keep opening dictionary.

[00:17:23] [LAUGH] Or add a title attribute to this one iframe, stuff like that, I mean, you could do a lot of these probably in a single day. Which is pretty powerful when you think about how many users everyday could be better, if you were to do these thing. Does anybody else have a site they want?

[00:17:41] Otherwise, I'm gonna call it.
>> Jon Kuperman: Healthcare.gov-
>> [LAUGH]
>> Jon Kuperman: secure Security, cool there's a bunch in here okay.
>> Jon Kuperman: Now so this site got reamed when they first came out, right? Like it was broken, it was like not working at all I think when it first launched Pretty sure there was like a whole big thing about it, okay, cool.

[00:18:11] So, it looks pretty decent, it's got one of these issue, so, let's see we'll see roll equals tabs. So, we want a tabless around it, in order to get the most of that and then, other than that, we've got One image in a background, sometimes this will complain even when it's not a meaningful image, in this case it is whoops.

[00:18:37]
>> Jon Kuperman: View and elements panel.
>> Jon Kuperman: I don't even see an image. Okay, well I don't know what it is, but Text elements. it does have some contrast issues looks like these. This is like my steam, it's kind of same thing, white on blue looks like not as great of contrast as it might appear to be.

[00:18:59] Again links, see this the kind of area where I complained that I, I'm not sure how I feel about it. Okay so when you, okay as a sighted user Links to change the language make a ton of sense, right, cuz it will just say the language's name in that language.

[00:19:14] But as a non-cited user, especially now, one thing they're doing really well here is that they have a lang attribute so the screen will know to translate, but It'll still seem a little bit maybe weird where it's not actually saying any like changing the language to Chinese or something like that.

[00:19:29] It's really just like the word Chinese. I still think it's okay, context clue wise. Like if you're scrolling through and then it's like Chinese, Japanese, English you know you're like it's a language picker. But it could be better. Honestly even having a label would be a lot better you know just to be like change the language to Chinese, something like that.

[00:19:48] Cool. Again, a big one people miss is just putting the language in here. Webpages that has a title tag. Yeah, so there's no title tag to healthcare.gov.
>> Speaker 1: The link that somebody posted for the sole security site looks like it's, it's pretty clean. It's like,
>> Jon Kuperman: Yeah, secure.ssa.gov/iClaim/dib.

[00:20:20]
>> Jon Kuperman: Did I get it right? Yeah, typos., I type very well when 50 people aren't looking at me, just so you all know, I'm a great typer.
>> Speaker 1: It looks right.
>> Jon Kuperman: One of the best. Excellent.
>> Speaker 4: Tremendous.
>> Speaker 1: Https
>> Jon Kuperman: Yeah. Here we go. Direct fast sites.

[00:20:42] Okay, do another audit here. So one thing that's kinda funny like one thing that you'll notice is that accessibility though it's kinda becoming a harder topic in mainstream web. It's been really important for like educational, government and like banking institutions for a really long time. So, you'll see some of this sites like a lot of times that maybe don't look super, cutting edge, but the accessibility experience will be like, amazing on this.

[00:21:07] You know, you'll see like an or something like that, and it's like, you know, It might look a little bit like old style. But then yeah you'll like pop on the screen reader and it's like a delightful experience. So it's pretty cool that you can like so I guess like roll equal mains only appear on significant elements which actually this feels significant so I'm not sure what that's about.

[00:21:30] What looks like one collision with an iFrame and a link that are kinda touching each other even though they're both focusable and then other than that it's all good. This is probably the best site I've ever seen as far as asessability audits go. So yeah, great job with social security, that's awesome and I think, do we have one more?

[00:21:47] Yeah, mybenefitscalwind.org.
>> Speaker 1: Am I allowed to suggest donaldjtrump.com?
>> Jon Kuperman: Yeah, they just have that not XSS XSS but we can do accessibility audit too. Again this one's really great, this is like I think we're gonna start seeing this like weird audit sites all day if they're like dot edu or dot org.

[00:22:11] And they're institution sites they're gonna be mostly green and if they're really slick looking like web 2.0 sites they're gonna be probably having some issues. Yeah, this one looks good again. Its got that AntiPattern that we talked about at the very beginning of don't put positive integers, except what they're really doing here it's a skiplink like we built.

[00:22:31] It's kind of good where they're like, push make that skip, it blinks right up at the top, so I would give this one a pass and say that's okay. Meaningful images again, kinda starting to see the same thing a few warnings about ratio. Other than that it looks really good.

[00:22:48] Does this have its own domain? Yeah, ysplash/officialshirt.
>> Jon Kuperman: It's not the page, I don't know how to get to his page. Continue to site, my bad. Stop, stop.
>> Jon Kuperman: Clear.
>> Jon Kuperman: Dang it.
>> Jon Kuperman: My goodness, I like, there, it was like gone for a minute. Okay, cool, not it.

[00:23:25] Some controls missing labels, I think like the hope here is to like We covered a whole lot of stuff. But now we can see that it's a smaller world where it's like, okay, we're seeing a lot of the same stuff. Those controls need labels, those images need alt texts.

[00:23:40] If you're gonna do roles, which you should, just make sure you structure them like children need to belong to parents. Check your colors to contrast ratio, that kind of thing. Yeah, a few images missing all text. Meaningful images in the background. Contrast ratio, same stuff same stuff. Missing a tittle, missing a language.

[00:24:03] And then here's a few that are tabulable but they are hidden for some reason like telephone number and stuff like that. So they should be probably not tabulable or not invisible and then, yeah, that same closed-captioning thing for the video. So, yeah, unless anybody has another site, any questions, things like that, that's all I had.

[00:24:23]
>> Speaker 1: I would say that that is a common problem that I've run into in auditing other people's sites, is where they'll elements like. Maybe it's a pop-up or a menu on Hover or something like that they have not taking out of the keyboard access while it's hidden. And so someone's tabbing through the site, and suddenly, it disappears.

[00:24:46] Yeah, I really don't have an idea where it is.
>> Jon Kuperman: Okay, so if you have like modal And it has form fields in it or something like that right? Then if it's hidden off, it can still be part of the tab index, there's a couple of ways you can deal with that.

[00:24:59] Yeah, cuz you can give it no tab index, take it away and then give it back. You can do ARIA hidden for it, and I think that'll keep it out of, I'm not sure on that one. I think you can.
>> Speaker 1: You can hit it with CSS.
>> Jon Kuperman: Yeah, right, so yeah, there's a couple different approaches, you can have that.

[00:25:15] I've definitely had that before where I'm tabbing through the nav and then my cursor is gone, and I'm like, where is it? And then it shows back up on the page again, I'm like, whoa, where were you? [LAUGH] And if you look on the dom, yeah, you'll see some form elements.

[00:25:28] That's a really good one. Yeah, I've definitely seen that before, cool.
>> Speaker 1: You can't tell where you are if you try tabbing through the site.
>> Jon Kuperman: So that's one that it, yeah, it doesn't really catch, so this is a good example. This is one that it didn't catch but you all could catch now that you know, so I'm tabbing through here and I have absolutely no idea where I am, even as the screen moves.

[00:25:52] So here I see these, this form actually has not a focus but it has my cursor. But then if I tab back or forward, I have no visual indicators like at all, until I get all the way up to the URL. .So again it's like, and this is gonna be one for those of you who are developers, you gonna probably have to be like going and forth with designers.

[00:26:10] And it will be like, no, this is how I want it to look and you're like I need some kind of focus indicator, we need some kind of visual clue. That can be a tough battle sometimes but it is yeah, it is tough if you're trying to keyboard only and you have no idea where you're at, cool.