 Do you know what the top four things to look out when it comes to web accessibility are? No, I can only think of two like anything of audio and then visual so there's visual hearing mobility and cognition Okay, so what are the last two so mobility is where like someone may not be able to use a mouse Or they may need to use a keyboard to navigate around all of your UI. Okay, and cognition is where if you show somebody like flashing text or Sight with like lots of animation that might cause an epileptic fit or just cause them issues Yeah I think I remember someone tweeting saying like they had a condition where if there was like loads of power like scrolling or something Goes on it makes them feel really nauseous because there's tons of like weird movements going on when doesn't power lack Scrolling make everyone feel nauseous is the real question. That's true So thankfully there's a few tools to help with web accessibility issue diagnosis We should go through them the first is The Chrome accessibility developer tools which is like a Chrome extension you can grab I'm a bit of a douche, so I'm gonna run it against your site Mine isn't too bad. It's not great. I guess we'll find out. Yes So we're gonna hop into dev tools and the audits panel check accessibility and go and run it against this site You've got a few few a few passing tests and you've got a few text tests that are not passing So we're gonna look at those The first one is yellow and says the text elements should have a reasonable contrast ratio Matthew. Yeah, I said the opacity low on some of the menu items that aren't selected So I need to bump them up or find a different way of visualizing it One of the nice things about this is if you hover over any of the dom nodes that will actually visualize it Over in the preview pane just kind of cool. Yeah, so one of the other things I found Because I have another issue on my site, which is the about Menu item doesn't actually explain anything about what's gonna happen, but if you go into accessibility options Like in the elements panel and you look the styles and computer styles There's an accessibility drop-down that you get and the nice thing with this is it actually shows you what the screen reader would say Based on what it's what it's got and the main reason like this is a it's a nice Like representation is something that's easy for me to go. Okay, that's what screen we would like say But it also shows you area labels that you could put that would affect the screen reader and what it says Which I kind of like because I wouldn't have known what the right area labels would have been So it's just kind of a nice way of educating yourself as you're going along Figuring out what you can change to get better screen reader support or anything like that. Cool. Nice so The thing that powers the accessibility developer to the extension is actually called accessibility developer tools It's like this node module. It's not necessarily just a node module but basically it gives you all the functionality that you might need to Go and run these tests locally Or hook up to continuous integration in case you wanted to write accessibility tests alongside your unit tests Is that running it through some of my phantom JS? So I wrote a while back a module called Ali a 11y which uses the gives you basically a CLI and CI Module for doing that and you can just go and run it against Travis and Nice do its thing drop in your CI drop it in Have you heard of tenon? You have you have so tenon gives you this nice like web UI for just doing nice basic web accessibility testing I've run it against developers.google.com and we have a ton of missing alter tributes Which yeah, like sir. So tenon is Super nice like the only criticism I have it like it's great because you know to do any tooling It's super easy to get like a gut check of where you are But the flip side is when I run my side through it says there's no problems with it Which we both know is now a lie So it's useful for a gut check and it's super low effort to get it running on your site, but a Question it I guess so tenon tenon runs against the web content Accessibility guidelines 2.0, and I think the accessibility developer tools just has like a good Set of general accessibility best practices it tries to check against so they're they're checking for related But then they're not not necessarily the exact same set of things. Yeah, they're both we're checking out So the other one is totale totale to letives. No To ta1 1y Basically, it's got a super awesome logo But what it is is it's basically a bookmark lit so you can drag it to your tool bar and when you're on your site click on it and it adds like a little button onto the bottom of your web page and The main reason it's nice is just the fact that it breaks up all the different criteria What you could look for in terms of accessibility and to nice little chunks you just focus on that one area And then it starts adding things into the page So with the contrast links it will actually like hover over the buttons like add a little button saying this is a problem area And it's just nice. It's very lightweight super simple And I think the way that it breaks stuff up is if you've got a ton of stuff wrong with your site It's at least manageable chunks But I think it's just nice. It's a nice little tool. Cool I've got to give a mention to Ali.js by Rodney Rehm Which is like this little helper library that helps you with some of the workflows You normally have when you're trying to make your app a little bit more accessible So it makes things like trying to figure out what elements are considered focusable on the page a little bit easier Trapping focus navigation to a particular DOM subtree Something that would have helped me actually so I was trying to make this navigation drawer Keyboard accessible the other day and I wanted to avoid you Like tabbing through the navigation and then like going back. Yeah, okay And it's having to other parts of the page Yeah, that might have helped with that and it's just really useful for like queering the DOM for focusable or tabable elements Check it out. It's pretty decent. So I have some web accessibility pro tips Go on they're not really pro tips. I'm incompetent, but they're good They're good things to watch out for solid advice. They're solid advice Um, so the first thing to keep an eye on is making sure that the components and elements in your page can be accessed using a keyboard And navigated around using a keyboard. Yep. Um next make sure that your elements can be used with a screen reader So for example, if I go to your website and I turn on welcome to voice over Voice over speaks descriptions of items on the screen. It's basically what it does Voice over on chromium unit testing a service worker dawned face vertical line map dawned So Does all of that the vertical line one is the interesting one where I've somehow added my name to the single vertical line So there's some issues there. We've already discovered in this episode that you have multiple issues with your site Probably worth checking out. Um People should also make sure that their their apps work without sound Yep, so things like games might be worth keeping that in mind Something like air horn hour all it is is a button that makes a horn You could probably make that accessible make show a I just had this idea now. It was just like a text that just goes Um, people should make sure that apps work without color because some people are colorblind Or don't see the full spectrum of colors Yep And people should make sure that their web apps work in high contrast mode as well Which is the problem that I've got on my side. You have multiple problems Matt These are just some of the ones that we can actually address using tools Thanks, man. I think I try I try