Debugging Exercise

[00:00:00]
>> Marcy: Let's do an exercise on debugging some webpages. We went through some steps earlier, so here they are recapped. We're gonna test with the keyboard. Can we reach, operate, and see every focused interactive control? So things that mouse users can do, can we do that with the keyboard?

[00:00:18]
We're gonna use browser DevTools and extensions, including X. The accessibility inspector in Chrome DevTools itself, will zoom in and test reflow. We probably won't fire up a screen reader at this point, just for time purposes. But that is something that I put kind of further down the list to do regularly.

[00:00:41]
We'll look at things like motion and color contrast, some of which will come up in things like the AX extension. And then if I'm checking things kind of broadly, if there's any videos, or media. I make a note to ask my team for captions and transcripts cuz like if nobody brings it up.

[00:01:00]
If no one brings it up and might never ever get included on the site and then someone is totally excluded. So better late than never to say hey, we need to generate some caption content. So I have some sites that we could try. If you have a site that you're working on, that's probably a great thing to check out and get a picture on what's happening on the site.

[00:01:25]
But I have some different categories here like I love music, so I was gonna test SoundCloud, news websites are notoriously terrible. E-commerce, there's some great, some could use help target's actually pretty good cuz they were sued, and so it's become part of their regular process. Productivity apps like Google Docs, I have a Google Doc that you can check out.

[00:01:52]
And those apps are really advanced, the Google Drive applications are, they put a lot of effort into accessibility, bless them. They're putting in the effort, we'll have to ask users like how is it working for them? But there are some really cool accessibility techniques in some of those apps.

[00:02:25]
>> Marcy: So let's open up an app and test it, let's test SoundCloud.
>> Marcy: Hopefully it won't just start playing, so I follow a lot of record labels. I listen to music all the time, and so I have a ton of content saved in here. I like that it has lots of interactive components on it.

[00:02:47]
So it's got lots of links. First step, I hit the tab key, I do not see a focus style. So, interestingly enough, I mentioned earlier I made a blog of wins called accessibility wins. And this is the first site I gave a win to, and it has degraded for accessibility since then.

[00:03:06]
I have to recall that win, I think, unfortunately. I mean, teams change, software changes. So, the focus style on the feed button is very faint. It went from a gray text, gray on gray, to white on gray. That is not sufficient at all for a focus style. We should just show an outline, something that has enough contrast from the items around it that you can tell what is focused.

[00:03:35]
Cuz that's just not really acceptable. So if I keep tabbing, now I'm in the search box, I can skip I think maybe the search button, is focusable. So the first thing I'm gonna go inspect so I'm gonna go inspect why I had a tab stop that I couldn't see.

[00:03:55]
So I'm gonna do Ctrl+Click, Inspect, and I'll make the DevTools a little bit bigger. So this button over here, I see I've got the input, I've got a button. And in Chrome DevTools, in this little hover, I can click on focus. There's our first big keyboard accessibility issue.

[00:04:17]
There is an outline of zero on these elements looks like header search submit. So they were very specific about suppressing the focus style on this button. If I uncheck that, there's probably another one somewhere because I don't see. A focus style, so there might be multiple of things that are causing this.

[00:04:39]
And I have to go digging cuz it should just show a focus dial, but it's not. Sometimes focus might not be the pseudo selector. Maybe focus visible could be another one. That's a newer selector that tries to exclude mouse focus from keyboard focus. It can be pretty helpful sometimes.

[00:05:02]
Wait, that, that worked. I just noticed, when I selected focus visible, I did get the default outline. So there you go. But that's an issue that I can surface pretty quickly just by tabbing. And then inspecting the CSS for a given element, cuz that should be focus-visible. It should show style so I can see where I am.

[00:05:25]
I mean, this blue border doesn't look great cuz there's no padding on the icon. So if I put padding on it in the button, it will add a little bit of space around the icon so I can see like around it. So and you can even do a custom focus style too.

[00:05:41]
You don't have to use the default one but it is pretty handy. So I'm gonna reset that and I'm gonna click back in that search field just so I know that my keyboard focus is in the browser and not in the DevTools. And I'm gonna keep tabbing, get to some other widgets.

[00:05:59]
So real lack of focus dials that are visible on some of these, like a little caret changing color to white, that's just not sufficient. But it is accessible otherwise. I can hit Enter and open this little profile thing, I can tab into these items. It does some wrapping, so my focus goes around.

[00:06:20]
That's pretty cool, I think I can hit escape and go back, the bones are there, there's some tweaks that they could make. They did make that component at least keyboard accessible except for the focus style. Kind of not really being sufficient. So that's good news though, right? It's like something we can work with that we don't have to completely rip it out and start over.

[00:06:40]
It might just be some simple CSS fixes. So let's run x on this,
>> Marcy: We'll see what kind of issues it finds when I ran it earlier there were a ton. 248 or something. So it's got quite a few issues. Best practices are on, if I turn those off, that was only a few.

[00:07:03]
So the difference there is that best practices are things like landmark elements that are great but not totally required. Whereas with CAG violations are the things that you should fix first. Like, those are the ones that, if you were sued, they wouldn't sue you over best practices, basically.

[00:07:22]
But there's lots of interesting things in here. Like, elements must only use permitted ARIA roles. So one reason why I mentioned kind of taking a pause before slapping ARIA. On everything is there's some requirements that you kind of have to learn like everything related to a given ARIA attribute.

[00:07:43]
Like are there other roles that it has to work with or certain rules that it's required. Or will only work with so like, this one is complaining that you can't use ARIA label on a span and actually this is a typo so ARIA does -role is not an attribute.

[00:08:03]
It's close, its role image. So that's a really subtle error that if I was scanning it with my eyes, maybe I would catch that. But the computer is pretty good at pointing this stuff out to us. And there's probably an issue in here about, ARIA attributes must conform to valid names.

[00:08:25]
So yeah, there is a rule in here that will tell us that aria-role is not a real attribute. Cuz we can't make them up, there's a standard set of role states and properties. So Axe is doing a really great job here of surfacing some issues that are kind of easy mistakes.

[00:08:41]
I mean, it's an easy fix, but it's an easy thing to mess up, too. So, fortunately, our tooling is really great, it's surfacing that for us now. So some things about Axe I could point out, too. If I need to see what element this is, I can do Highlight, and it'll highlight it in pink up there on the screen, that can be helpful.

[00:09:05]
Sometimes it'll report things that are not even visible, maybe they have screen reader only on them or something, and it's just in a state that you didn't expect. So highlight can help to get you to that where it is on the page. And then there's also this little Inspect element.

[00:09:21]
That one I use a lot, it will jump me over to the Elements Inspector, and I can go over here and look at an element. We talked earlier about alt text for images. So to circle back to that, there's a tool in here that you must know about.

[00:09:37]
So over here next to Styles, Computed, Layout, etc, the little caret icon, there is an accessibility inspector. This is your new best friend. [LAUGH] It's amazing, I love this tool. Here's our next mention of the accessibility tree. So this is sort of parallel to the DOM. It will highlight all of the accessibility information that is in the DOM.

[00:10:01]
And for an image, so this is interesting. So it's showing us that the role, because that aria-role is not a real attribute, it should be role. It will say its role is generic, whereas if I change this to role, this will update, and now it has a role of image.

[00:10:21]
That was just a soft edit in the DevTools. You'd have to go change it in your real code base, but I can at least fiddle with it here in the browser, and this will show me which thing wins. So if I had an aria-labelledby pointing to some other element, I could see if it worked.

[00:10:40]
And this is the step, the question about how much we should test with a screen reader. You should start with this, for sure, because this is what the screen reader is going to look at. And it's gonna look at the accessibility tree and all of these computed properties and everything.

[00:10:55]
You can get most of the way there just by using this tool and Axe. If you clean up all that stuff and do the debugging, you'll get pretty far. So for your alt text fallback, trying to style that, for those techniques, you could go and inspect what is actually getting spit out for the screen reader.

[00:11:16]
Did I accidentally hide it from every screen reader user, or is it actually picking up the text in the way that I hoped? So this one's pretty essential. Yeah, it's amazing to me how hidden this tool is. It's so powerful and so helpful. Now you know it's there, if you didn't already.

[00:11:40]
Okay, so DevTools, that's super helpful. If I go back to Axe, let me zoom this out one level, I wanna see some contrast issues. Cuz that is a lot of the accessibility issues are contrast-related. And so this says that it ensures that the foreground and background colors meet the minimum contrast ratio.

[00:12:04]
So depending on the font size, this is a small font size, I guess I'm gonna highlight so I know which element we're talking about here. It's the orange Try Go+ text on a gray background. It almost looks like it could meet the ratio. So it needs to be 4.5 to 1.

[00:12:24]
We can calculate the ratio of values. Is there enough of a difference that it has a ratio of at least 4.5 to 1 at 14 pixels? It has to be at least 18 points or 24 pixels to get above a threshold where it's big enough that it only has to be 3 to 1.

[00:12:46]
This doesn't meet that size threshold, so it has to be 4.5 to 1, and it's only 3.94 to 1. So that's pretty close, but not quite. So we would wanna go in. In this case, it's kinda tough, because that's the SoundCloud orange on the gray banner. So our options are, make the orange darker, or make the gray lighter.

[00:13:10]
I don't know, I guess that's kind of a mind bender, what direction do you have to go? You'd have to change those colors. Maybe we can fiddle with it. So what I wanna try is see if I can change the orange just enough to get to that 4.5 to 1, cuz sometimes that's the solution.

[00:13:25]
If it's off enough, or you have to make it brown and it looks terrible, you're gonna have to talk to your design team. Cuz it's like, you can't fake it. They're gonna be like, why is this brown? [LAUGH] Cuz I was trying to make it match contrast ratios.

[00:13:38]
Just, you can't, but sometimes you can just tweak it enough, so let's go see. This element is Try Go. So if I go to Inspect Related Node, and I go back over to the Styles, if I lose it somehow, I can go Ctrl+Click and inspect it. And so I know this element has an issue.

[00:14:01]
This orange color, nice, it worked. So Chrome has a contrast tool, it doesn't always work. I think it has to do with where the background is, what element it's set on. It's very murky to me why it works, sometimes it doesn't, but this time it worked, excellent. So it shows me this ratio.

[00:14:21]
Oop, I didn't mean to open that. There's a little caret here, I can expand it. So there's AA that needs to meet 4.5. If you're really swinging for the fences and you wanna hit AAA, which is a higher standard, most companies or organizations don't go for that, that would be 7 to 1.

[00:14:40]
It would mean more people could see the colors, but AA is kind of the agreed upon standard, for the most part. So this contrast picker, the reason I love it is I can drag. I can go like this, drag down the colors. I'm going the wrong direction. So if I need to get up to 4.5 to 1, I'm dragging over towards the white.

[00:15:05]
And I just got it, and I can barely perceive a difference. So this one I could fiddle with, I think, without having to go back to my team, see if they notice. This is a ask for forgiveness situation, I think. You just sort of change your color config to something that passes.

[00:15:25]
And then every element that had that color would benefit from it, and you could fix it in one go, hopefully. Let's see what this selector looks like. So, this color, it's used on multiple elements, for sure. SoundCloud classic, looks like maybe they're doing a redesign or something. So sometimes that's hard, you're like our customer-facing site is being phased out.

[00:15:49]
It has all these accessibility problems, but we're re-platforming, don't spend time fixing the old thing. It's like, well, but it's not gonna be usable until you re-platform. So whether you get time to fix it or not is, yeah, unclear, it'll depend. But if you can fix it with one little tweak of a x color value or something, maybe you can slide it in there.

[00:16:12]
So that's the Chrome tool. When it works, it's great, it doesn't always work. So I'm gonna show you the one in Firefox.
>> Speaker 2: What would it look like at triple A?
>> Marcy: Good question. So for triple A, that might be harder to get away with. I love these lines.

[00:16:29]
So the lines, the 4.5 is this lower line, and then if I drag it all the way over to 7 to meet the 7 ratio, It's pretty noticeable. It's like a washed out orange-white, so I don't think I could get away with that without people noticing [LAUGH]. I shipped a feature doing exactly this, like, last week, where I tweaked the colors just enough, nobody noticed.

[00:16:57]
So, sometimes that is the way to go and tools like this. I mean, I think on the thing I was working on, this color picker was not working and I sure missed it because it's very helpful when it works. Otherwise, you're like changing the color slightly in the direction you want on the regular like this color picker without the ratio line and then you have to go test the value manually, and it sucks.

[00:17:23]
So let's go over to Firefox, because we'll go see what's going on with the color. So they have the same orange. I don't really wanna sign in, but hopefully I can test this color just in the dev tools. So I'm gonna inspect just like I did in Chrome.

[00:17:43]
And we've got the orange color, some rotating animation, that is a little distracting. That is something we're gonna talk about later. So I mentioned motion. Here's an example right here. So this color, there's a border Color and a background color. So if I click on the white, it is showing me that the contrast ratio for these buttons has an issue as well.

[00:18:07]
So if click on this, so it doesn't give me the line, but it does give me the like, I can drag it around and change the color. When it's the background color is the thing I would change, I might need to use other tools to do it, cuz it only gives me the ability to drag around on the foreground color.

[00:18:30]
But if you made the change for the text on the other examples, maybe that same orange color would be the fix here too, for the backgrounds. But this tool, like if the Chrome one isn't working, Firefox sometimes can help a little bit cuz at least the goal would be to give you a color picker that you can drag around on, cuz it's pretty helpful.

[00:18:55]
The Accessibility Inspector in Firefox also, it has its own tab, and this is their accessibility tree inspector. so it's similar not exactly the sama as chrome but it still gives you a lot of really great information if you're a regular Firefox user. And you could use X in Firefox as well.

[00:19:19]
Cool, okay, so our other techniques do a little bit of zooming. So I'm gonna close out my developer tools. And if I zoom way in to at least 200%, I get some horizontal scrolling. That's not great. So that if the yea, looks like the whole thing has that issue.

[00:19:47]
So going past 200% can be sort of ambitious. I think the requirement is 200% for there's a mcag guideline for what's called reflow. And so this one would fail reflow, I would say because it doesn't seem like it would be that challenging to make this scale. Everything should just be responsive, I don't know why it's not.

[00:20:14]
But that's how I would test that one. I'm actually surprised that there was an issue with that cuz that one's, if it's responsive, usually that's just handled. You might find some anomalies that are like little details, but that looked kind of major for how their style sheets are set up.

[00:20:29]
And with CSS Grid and Flexbox now, you can just use modern tools and have it apply for those situations, it's awesome.