This course has been updated! We now recommend you take the Website Accessibility, v2 course.
Transcript from the "Accessibility Auditing 3" Lesson
[00:00:00]
>> Speaker 1: Drew is asking for another audit on a site. If you could just pop into the chat room for a sec. Sweet, good typing.
>> Jon Kuperman: Thank you. Cool. So, I'll start with a regular one. Looks pretty good so far. We've got two media controls. These are buttons that don't have labels.
[00:00:19] I'm not even sure where they are. They're way up here somewhere. Cool, so you have this close button, and this search button, could just have a label, even if you just visually hide it to say search and close. You could also get fancier, I guess it doesn't need to.
[00:00:33] You could put a description on it if you want. Text elements without a contrast ratio. Yeah, so this grey on white looks to be a little bit problematic.
>> Speaker 3: I was gonna ask you about that one. Cuz I coded that.
>> Jon Kuperman: [LAUGH] That's my signer
>> Speaker 3: [LAUGH] But so that one always gets flagged.
[00:00:51] What it is, if you actual do the values it's 70 70 70 over white. So what's happening is it's absolute positioned over a white border. So technically, it's accessible from a contrast ratio standpoint. But, because of how it's read in the DOM, it's reading that background color.
>> Jon Kuperman: I see.
[00:01:12]
>> Speaker 3: Which is the, I don't know, fours. And so it's reading the sevens over the fours instead of the sevens over the actual border.
>> Jon Kuperman: Gotcha.
>> Jack: Yeah, I've definitely found that you've really, you have to take these accessibility checkers with a certain grain of salt because they only just kind of take what they can see on the page.
[00:01:37] Which just doesn't always tell the whole story.
>> Jon Kuperman: Yeah, they're programmatically figured out. Like, these aren't users so yeah, I think you're fine, yeah.
>> Speaker 3: So, how would you. So like, legally we have an obligation to meet certain standards and we've got those cataloged.
>> Jon Kuperman: Yep.
>> Speaker 3: But, if something like that were to come up in flagged, how would you go through the legalities of actually demonstrating that you are actually passing what you-
[00:02:05]
>> Jon Kuperman: Yeah, I mean, Jack if you have insight on more of the kinda legal side of things. I don't have a ton there.
>> Jack: Well, I'll just speak to, for example, when I used to work for Starbucks and we would occasionally have concerns or even suits brought by customers about the accessibility of the site.
[00:02:25] And there were times where I would basically have to like Report as portions of the side, and where there were issues for example on the case that you are talking like with the search icon or the car contrast. The person that was reported and probably was using one of this poles
[00:02:42]
>> Jon Kuperman: Right.
>> Jack: Was erroneously recording the error, and so it was basically documenting like this is actually what is the case even though this checker says one thing. This is the reality and you just have to be able to provide that.
>> Jon Kuperman: So theoretically, he would be fine because the contrast is fine even if the tool reports otherwise.
[00:03:02] Also the tools are open source it might be worth popping in something under the chrome project on get hub and being like hey, my son always gets dinged with this, but it's not here's what's really happening. Cuz they might be able to work around it, but I do agree.
[00:03:15] And when I teach the web performance classes the same thing. You gotta take it with a grain of salt, cuz it's just analyzing some code and trying to figure things out. So yeah, it sounds like you would be fine on that cuz you're able to prove.
>> Speaker 5: Can I have you tab down through the page.
[00:03:31]
>> Jon Kuperman: On this one?
>> Speaker 5: You'll see shown to today's classes.
>> Speaker 5: So notice how it scrolled to the beginning of the day, which isn't necessarily what we want.
>> Jon Kuperman: Yeah.
>> Speaker 5: So would the best thing to do is to re-hidden all the things that aren't in view?
>> Jon Kuperman: Well, I mean a couple of different things.
[00:03:57] One thing, I mean so you might just wanna be more specific with on the tab, you can do a key download scenario and if on tab in the act development is the one that's about to go into that area, you could then have full control over what focuses on next.
[00:04:13] Like you could focus on little.
>> Speaker 5: Is that a good idea though? To only, to mirror what is visually there?
>> Jon Kuperman: It might be, so that's like the tricky thing. So think of, because you're appealing to both. Non-sighted users, for which that won't be so much of a problem, cuz they'll be like today's schedule, 6 AM, 7 AM, right?
[00:04:34] But what about sighted users who are using keyboard only, then it does look like a problem because it scrolls really really fast out of the way. Again, it's a little bit subjective.
>> Speaker 5: And if you keep tabbing it'll actually break the nav. Like there it just went away?
[00:04:48]
>> Jon Kuperman: Yeah.
>> Speaker 5: [LAUGH] Cuz Chrome is trying to be helpful by keeping it in view, but yeah.
>> Jon Kuperman: Yeah, definitely I would look into the tab disappearing. But it's a little bit subjective on which one it should focus on first. Because yeah, I don't know. Like it's I would probably put a tab listener in there and replicate the visual experience.
[00:05:12] Because you already kind of know, it looks like you're looking at what time it is to get the next class or whatever. I would probably have like a listener and if you're on that thing, if that's the active element, you hit tab, focus on the first one in view, not the first one in the list.
[00:05:25] That might be the approach I'd take. Yeah?
>> Speaker 6: I was just checking out that Starbucks site, and I tried it in Firefox and it didn't, the tab, the skipped navigation stuff, in fact it just didn't work well. I tried it in Safari. It didn't work well either. So, it makes you wonder.
[00:05:40] Is that, I mean, their implementations or what is going on there?
>> Jon Kuperman: I don't know, it might be-
>> Speaker 6: It could be, and same with New York Times. New York Times-
>> Jon Kuperman: The skip link issue?
>> Speaker 6: The skip link stuff. I mean, Chrome is nice. You get the nice highlight of the elements.
[00:05:57]
>> Jack: There are definitely cross-browser issues, depending upon whether you're implementing something like that through CSS or JavaScript, for example, like his example earlier. So that's an, what I would say that, that is an opportunity to try different solutions and see which one's gonna be the most compatible.
>> Jon Kuperman: Yeah, it definitely is some kind of implementation thing though.
[00:06:17] Yeah I'd be interested to see what's the current approach of doing, and maybe figuring out, there's a bug. There's some cross browser thing that you can, I'm sure find here. But I'm not sure.
>> Speaker 6: But the question is whether it's a bug on the site or is it a bug in the browser.
[00:06:31]
>> Jack: Right, exactly.
>> Jon Kuperman: That is the question.
>> Group: [LAUGH]
>> Jon Kuperman: But the answer is always you're gonna have to do more work as a developer. [LAUGH] But yeah, I'm not sure with this specific one. But it would be something good to look into. I'm a little bit wondering if If my cheap little CSS skip link works in here or not.
[00:06:53] This is the wrong branch. Yeah it's interesting, and it gets even more interesting when you're dealing with discrepancies between screen readers, sometimes where it's like
>> Jon Kuperman: Nope, yeah mine doesn't work on here either. Looks like Safari is really particular. If you notice, Safari isn't even letting me tab through my navigation.
[00:07:13] Safari's only giving me my, the URL bar and then my form.
>> Speaker 5: Did you turn on that option?
>> Jon Kuperman: That's what I was just wondering. I wonder if this was tied to the, like, preferences keyboard, you know, something in there. I don't remember exactly, it was like at the beginning of our.
[00:07:31]
>> Speaker 5: Shortcuts.
>> Jack: It's the third option. Is that-
>> Speaker 5: All controls. The bottom.
>> Jon Kuperman: Oops.
>> Speaker 5: Very bottom.
>> Jack: There you go.
>> Jon Kuperman: Nice.
>> Speaker 5: And then there's a setting in Safari itself too.
>> [CROSSTALK]
>> Jon Kuperman: Here we go, okay, cool.
>> Speaker 8: Now you can get to your buttons, yeah.
[00:07:47]
>> Jon Kuperman: But, I still don't have my skip line.
>> Speaker 5: Either.
>> Jon Kuperman: And still not the nav.
>> Speaker 8: And not your check, I think check box is there for a second.
>> Jon Kuperman: Check box is, yeah, this is, yeah.
>> Speaker 3: I'm sorry, go to the Safari preferences because there is an additional Safari preferences.
[00:08:02] I think, it's under advanced, I think. Press tab key to highlight each item on a webpage.
>> Jon Kuperman: Boom, okay, that's the Starbucks now.
>> Speaker 3: So, that's the problem with Safari, in particular, is that they have a second layer of preference.
>> Jon Kuperman: So, in order to get Safari working, you gotta turn on your system preferences, then your Safari preferences, both for tabbing through.
[00:08:29] But they do work now and I'd have to look into Firefox about something, although I wonder if the system setting would be enough too. I don't think I have Firefox installed on here. But yeah, it's interesting, really interesting, bummer, kind of.