Website Accessibility Accessibility Q&A Round 1

Transcript from the "Accessibility Q&A Round 1" Lesson

[00:00:00]
>> Jon Kuperman: So, Benji is asking, has anyone tried using things like selenium to make automated tests for accessible keyboard interactions, for example, tabs, or screen readers?
>> Speaker 2: Yeah, so I've done some before, specifically for keyboard shortcuts. I've done a few, so they like, load up the page. So yeah, you can use Selenium for it just fine.

[00:00:21] A lot of the time, I think you can get away with just using JavaScript and spying on those events. If you're using Jasmine or something like that, you could throw a jKey and then spy on your next item or whatever it is. Like if you look at my shortcut library, like I don't use web driver for it, I just simply through in catch time events.

[00:00:41] So yeah, that would be faster, but you can definitely fire it up with some kind of web driver task, for sure.
>> Jon Kuperman: Okay, I'm gonna ask Ben's follow up question next. Also, are there any automated things to process screenshots in a similar manner to no coffee?
>> Speaker 2: Not that I know of.

[00:01:00] That would be pretty awesome. Yeah and nothing that I know of, no coffee is pretty unique right now, yeah I don't know of anything that'll apply those layers. I mean it seems like it would be kind of trivial like they've done all the work. Of getting those effects that you could peek into their source code and turn it into something automated.

[00:01:18] You could even have that plugin install as part of your CI. But, yeah, there's nothing that I know of right now that'll get you screenshots of different visualizations like that. That'd be cool. If anybody wants to build that, that'd be sweet.
>> Jon Kuperman: Drew is asking are there any recommended tools for accessibility testing that can see into Angular components?

[00:01:44]
>> Speaker 2: So, yeah, as far as that, ngAria will go, I'm not a big Angular person, I haven't worked with it all that much. The ngAria I believe will help with a good amount of stuff as far as essentially linting out as your creating components. I'm not sure further than that.

[00:01:59] I know that they've done a lot of really good work with Aria, and I know like Marcy's Sutton who I mentioned earlier has worked a lot with the Angular team. So I might just do a little bit more of talking around like maybe ask her or see, I think they have some pretty good tools set up around it though.

[00:02:16]
>> Speaker 2: And then with React, I know the React ally. I have worked with that and that works really nicely just like as you're creating components it's giving you feedback on things that you likely missed.
>> Jon Kuperman: What would you consider to be some of the more challenging accessibility problems to have to solve?

[00:02:38]
>> Speaker 2: I think one of the big things is that the tools are pretty easy to implement, but defining what a good work flow is, I think we even saw it with some of the simple examples, where it's like everybody's kinda bursting with ideas. Like what if we put a label, you know what I mean?

[00:02:54] And I think that whatever you decide on is pretty easy to implement, but figuring out how people use your site and what the experience should be, I think that's kinda challenging. Where a lot of times at Twitter, we were really fortunate, we had a few community people in San Francisco that would come in and show us.

[00:03:13] We had blind users that would come in and be, I do this all the time, I try to send a tweet to a friend via DM and it stinks. Let me show you how. But it was hard for us to really like to really figure out what a good flow should be like, it's pretty easy to add the R attributes.

[00:03:29] It's hard to know how to do it in a great way and I guess. I think it's one of the biggest challenges and then it's also really challenging like the more third party software you equip, the more you kinda like start struggling with like. You just do an iFrame and they pull out a bunch of junk and that junk is a inaccessible.

[00:03:45] And you're like, we're in contract with, will you please fix this, and it's like it's not really in our, things like that, interfacing can be really difficult to, where it your users that are affected but it's not really your software to control. And then the third thing I think is just like that same thing I started talking with.

[00:04:03] Everyone kind of feels like it's everyone else's problem and like times where I've been like this is inaccessible and it's like, we're just gonna ship it now and we'll fix it later. And I'm like, yeah but you don't understand. The design looks nicer but we're breaking function, like it works right now accessibility, this new feature is broken like how can we, you know if it was any non-accessibility issue we'd never ship it.

[00:04:23] But a lot of times I think there is like a general, its just difficult. It's difficult to get priority for it, it's difficult to get like success criteria around it and like its difficult to get everybody you know what I mean kinda on I don't think anybody would complain if you're like I'm gonna spend my weekends doing accessibility work for our site they'd be like great.

[00:04:40] But then when your like hey we're gonna be put a freeze on this feature until it's accessible like you start ruffling feathers so I think that's like, that's probably been the biggest challenge honestly.
>> Jon Kuperman: As you were doing research for this have you noticed any kind of black hat techniques people are using to get around some of the accessibility rules, and the same way people might abuse SCO stuff.

[00:05:01]
>> Speaker 2: Yeah, SCO's a big one, whether it's content on page or image alt stuff. Another one that, I don't know if I would call it black hat, but it's a bummer, is when you have an accessible version of your site, which is rubbish it's just like no cool stuff.

[00:05:19] Just some text not interactive. I think that's like just a real bummer and I think people get really sad at that kinda thing where they're like, it's a little blurry. And then they click. There'll be like a link like our accessible version, and it's just like terrible. So I see that a lot.

[00:05:37] And again I think it's just like it's like could you spend a quick day, do a quick audit add some alts, you know what I mean screeners are so good already but then people are like alright we're just gonna remove all the JavaScript CSS and you know what I mean I think that's another big one that I see pretty often.

[00:05:54]
>> Jon Kuperman: Even in, another question what about responsive design when you get into things like flexbox and reordering Dom elements.
>> Speaker 2: Yeah, yeah, that's interesting. So for the most part that stuff goes really well. In the sense that whether it's left/right or top/bottom, the first thing's still first as far as what the screen reader's gonna read.

[00:06:15] There are some things, especially when you get out of CSS and more into using JavaScript to move stuff around. Where you can really mess up the like the Dom tree and you've changed it out from under someone. So I think that one you have to be more careful with.

[00:06:27] But I do find like Flexbox and floats degrade pretty nicely. Just cuz like I said, the first one stays first, whether it's above or to the left, yeah.
>> Jon Kuperman: From Ben again, it seems like navigation menus might be a hotspot for accessibility problems. Any suggestions for building navigation menus on content heavy sites?

[00:06:47]
>> Speaker 2: Yeah, definitely. So I think the big issue you run into is like drop downs and fly outs making them accessible. This is actually something, I think, I'd like to add to the code base as an example. So it's like there's some cool things you can do. The thing that I would recommend doing is really getting familiar with the tab index stuff because what you can do is like, you can basically, so what you wouldn't wanna have happen.

[00:07:09] If you have like ten items wide and each one has a dropdown of five items deep and each one of those is a fly out. What you don't want is for someone to get to the tenth item, then have to hit the first one which causes the drop down then go through, you know that I mean?

[00:07:24] You don't wanna have to go, does that make sense? Like, going through hundreds of items cuz that's the order that they appear in? So you'd wanna make sure that, if you focused on an item which as a drop down, and those drop downs have flyouts, those flyouts are hidden until the dropdown's focused, that kind of stuff.

[00:07:40] I would even probably go, maybe go as far as like each top level item, you would take all of its children out of the tab index, and you'd put an Aria hat, I can't remember what it is, but you'd put an Aria label on it, to let the screen readers know that there's more.

[00:07:54] And only show that to screen readers if they hit space something like that. Yeah there's a lot of concerns with navigations, especially with dropdowns and flyouts. But I think the big thing is going through it with the screen reader on and plucking stuff out. And then putting it back in only when it needs to be read.

[00:08:08] And you can do that I think pretty easily just with JavaScript selectors and be like, okay, take all the level one and two items and put a negative tab index on them. And then only when a key down is triggered down on a parent, take that one and put tab index back on them something like that.

[00:08:25]
>> Speaker 2: Those things are tough from UI perspective too. Right, like cuz another one that's sort of in the realm of accessibility and I'm sure we've all experienced flyout menus where you are the littlest bit off and you lose the whole thing and you have to go back into there's a, I think if you have to do one of those, there's a lot of concerns.

[00:08:43] Like design UX accessibility, but it's doable it's defiantly doable. And again, if you use a popular framework, they usually will give you a head start.