Auditing Slack & GitHub

[00:00:00]
>> Marcy Sutton: And now we're gonna do some testing on apps in the wild, and I'm not picking on anyone. A lot of the issues that we'll find, there's like strengths and weaknesses in these examples, and a lot of these things are not unique to them. So I'm not picking on anyone, one person or one company.

[00:00:18]
So this first link is a slack JSON file viewer and it's from the Gatsby slack. So I'm the only one or people on that slack are the only ones who can view this particular link. But you can sort of look at the URL and it is an uploaded JSON file.

[00:00:33]
So if you're in a slack workspace, and you upload either a text file or a JSON file, you can find this interface. So let's open it and see what's going on with this. So they've got this web page. And this might not be core to the slack application, but I'm sure it's got some interaction on it.

[00:00:52]
And I put it in the camp of accessible web applications or its not super accessible, but in the things that we could be evaluating. So this JSON file is some feedback that we've been collecting on the Gatsby js.org website it's got just a data dump of the comments that people have made.

[00:01:12]
And if i tab through the web page I can't really see where I am, and so a kind of hot tip if you're having trouble figuring out where you are on the screen for the sighted testers in the audience. You can just kind of click in the web page to set your focus point just to figure out like okay, am I at the end of the page or something, what's happening here?

[00:01:35]
Little quick tip. So there's a number of items here that I can't reach. And if I hover over this little star, it's says star this file. It's got a tool tip, but I couldn't get to it. And there's some controls over here in the top right of this little widget that say Actions.

[00:01:53]
And there is a little pop up menu here that I couldn't even get to. So for a keyboard user or a screen reader user, you just can't use that feature. Which is not equal, we should do more to make that more accessible. So there's that problem. And then once I had tabbed, I'm actually trapped in this content editable region where the data lives, where this JSON raw file is.

[00:02:18]
Because there's something going on here where it's trapped my keyboard focus and I can't get it out. I can't shift tab, I can't hit tab, I'm locked in. So that's a pretty blocking issue that you might not even uncover unless you're testing with the keyboard. So there's a couple of issues there.

[00:02:36]
And to debug real quick, what I would do to figure out what's going on is I inspect the element in the developer tools and I can go and look at what is going on with this element. So there's a button here. Its focusable so if my focus is landing on this button.

[00:02:50]
But in the CSS, there is an outline zero. And I actually, from looking at this earlier, found that there's two outline zeroes on this particular button. So now if I tab onto it, I can see where I am on the screen. And we'll talk a little bit more about CSS later on but we wanna make sure we're actually testing with the keyword so we can see where we are on the screen.

[00:03:11]
Cuz if you can't use the mouse, that's a pretty fundamental feature. And through user testing I've found that those visual outlines are really helpful for a lot of people. So there's the slack viewer. One more thing I was gonna show you about this actions menu to see what's going on with this one.

[00:03:28]
So, this is an anchor tag, which is a link element. And we'll talk about links and buttons a little later on. But this anchor tag is not focusable because it's missing an H ref attribute. So, whenever you're writing HTML, and we'll talk about semantics more as well, we wanna make sure we're using elements to their full potential.

[00:03:46]
So, that way we're not missing these, like really core features of elements like anchors. So they're focusable, they're controls, like I mentioned, they're supposed to navigate a user somewhere. So this maybe wasn't the best element to pick like maybe a button would be more accurate for something interactive like this.

[00:04:08]
But the lack of an h ref just means I can't get to it at all. So that's how I would debug things like go figure out what is, you know, see what the interactions are missing and then go dig into the dev tools and see what okay, well, what elements did they use?

[00:04:23]
Like, why is this not working? So let's go to the next one. I've got GitHub and GitHub's been doing a lot of work around accessibility, which is great because there's a lot of developers with disabilities and a lot of developers with repetitive use injuries like myself. And so you wanna be able to use the keyboard to be that power user and or even just regular user you know, average people who just need to use the the website.

[00:04:50]
And so if I tab through this one, they've got a skip to content link at the top. Some pretty great features here. I'm going to skip by some of the stuff so they've got some menus here that if I tab onto a button, hit the enter key. I am now in this little menu and I can use the arrow keys.

[00:05:06]
I can hit Esc, and it will send my focus back where I came from. So this is an improvement on the one we saw from slack and that is focusable and interactive from the keyboard. And I'm gonna run a browser extension on this page. So I've got ax installed in Chrome, I'm going to go over here, pass the elements tab and go to ax.

[00:05:27]
And I've got this page rendered so I can hit analyze and it will return some results for me. And I'm gonna pop this DevTools window out so we can see a little bit more. So it found 37 issues that we would need to go through and see like okay what is it returning?

[00:05:45]
So it says an ID attribute must be unique. It's on a details menu like it tells me where in the page this lives, which element it's talking about. So I guess there's an input, that might be the one it's referenced. I'll have to go look so to figure out what element it's referring to, I have a couple options.

[00:06:07]
I can hit this highlight button. And put this on the bottom maybe. So highlight, see where was it. It might be a hidden element or like a mobile view or something so what I can also do is hit, inspect node, and I can find the element in the dev tools.

[00:06:25]
And if I Ctrl click on it and say scroll into view. Yeah, this has got to be like, hidden somehow, maybe something further up the DOM tree we'll go to the next one. Sometimes it takes a little bit of debugging to figure out cuz we can do a lot of really tricky things with web pages.

[00:06:43]
So the next rule that it returned was elements should not have a tab index greater than zero. And we'll talk about tab index. This one has a tab index of one. This one is labeled as best practice. So it's not what we would call an accessibility violation, which is something that you absolutely have to fix.

[00:07:01]
Best practices are things that are good to consider. But you can actually filter these over here so I can filter by violations. And the only one that's actually returning is this idea attribute must be unique. So that's where I would start, is like focus on the violations and make sure you're addressing the things that are actually issues because the best practices are sort of subjective.