 Hey Matt. Hey, how's it going? It's good. It's good. Did you get a haircut? I did a haircut new accent New new new look new feel. It's good. It's good. You're looking better than before you feel better than before You're not Matt. I am not no hi. I'm I'm Rob Dodson I'm a developer advocate on the Chrome team. Sure Rob. Just just sell sell yourself I mean hello, hello, and also For selling stuff also host a little show on the Chrome developers YouTube channel called Ali cast world renown Is that what we're calling it? Yes world world renown world renown. I see people around the world have renowned it I think okay. Yeah, all right. I believe what you want to believe but today. We're gonna be talking about accessibility Auditing. Yes, right. What is your workflow for that look like? Yeah, so over here on my laptop I've got a site that I've been working on so this is called lifestyle It's got some cool like hipster photos and stuff like that people live styles of the accessible and famous indeed All right. Yeah, and what I usually do when I'm you know working on improving the accessibility of a site Is I will use the new audits panel in Chrome DevTools, which is very very nice If you go to create a new audit, you'll see that you've got like a number of options inside of there So you could look at pwa-ness best practices, etc One of the topic areas is accessibility so you can just go run just an accessibility audit if you don't you don't feel like doing the other test Here's one that I ran against the page and It's doing pretty okay, right? It's gonna 91 not so bad But there's definitely a few issues that we need to fix and in particular one that I see a lot is is color contrast So you've got your your foreground text maybe as little too light on the background color One of the nice things that we can do with the audits panel is we can actually dive in and we can see which elements Specifically have failing contrast so here I can see that I've got this like product card price element and if I click on that and Stretch this out a little bit. You can see it'll take me over to my elements panel and I can actually Scroll into view the actual element that is failing just which is this price right here Nice and it already selects the dom node for you. It's cool Yeah, and so one of the things that's really helpful is you know Not only does this allow me to sort of quickly identify this node But one of the things we're working on which is over here in Chrome canary right now is actually a color picker That will make it a little bit easier for you to fix those contrast issues So if you're in something like Chrome canary you can go into Chrome colon slash slash flags You can look for the word developer tools Experiments. Oh, it's you're in flags and experiments. You look like to live dangerously. Oh, yeah. Oh, yeah, so dangerously Okay, so we enable the developer tools experiments, right? We step into The future it'll refresh our browser for us. We can go back over here pop open as a dev tools Click on this little settings menu Good where it says Experiments And here we can see we've got accessibility inspection as well as color contrast ratio line So let's let's see what that does. So we'll go find that same node that was giving us problems over here Inspect it and then we can see in our styles panel I got a little color swatch and click on that and now you'll see that there's this little line Inside of my color palette. So this is actually easy So this was actually telling us like where our colors needs to be in order to have sufficient color contrast So since we're above the line, we get this little warning that says we've got low contrast I happen to know that this is not like the final look for this piece of UI It's still being iterated on but it'll be something like this where you've got a line and you can sort of tell Which side is the good side of the bad side? So I can actually just drag this below the line That warning goes away. You can see over here It's also like updating my element live in the document and it'll sort of tell me what the good color contrast ratio is So I can just grab that value right off here and then go back and just fix it in my CSS That's pretty neat. So I was trying this out the other week and Something that occurred to me was that you know if you use a developer realize the contrast is a little bit off Do you need to go back to your designers at that point and say well? Is this okay for our brand and everything is that something should be factored in earlier on in the process? I ideally yeah, like this is There's there's definitely other design tools out there There's I think there's plugins for sketch and things like that which will also help you Look at the color contrast for your designs and make sure things are not too low contrast Anytime you can catch that earlier in the process make sure all the designers are on board and all the stakeholders are on board And and that sort of like makes it easier when it when those things come downstream for folks to implement it And it doesn't become like a contentious issue or anything Cool, that's that's awesome. The house audit also had some other accessibility stuff in there as well, right? So had contrast was highlighting all the tributes to alt attributes. Yep. Yep. So yeah, if we go back to that report Let's see here So yeah, a few of the things that that this site was failing Missing some alt attributes. We've got form elements that don't have associated labels The big problem there is you land on a control and maybe it says that it's a button But it doesn't tell you what kind of button, right? Is it the you know, send my social security number to hackers button I don't want to click that button, right? I want to make sure that I'm clicking the right kind of controls and I know what I'm interacting with We've got over I think 32 tests or maybe even over 35 tests in in the lighthouse accessibility checker here and Under the hood these tests are all based on a library called axe core which is made by some folks at a DQ So yeah, we we work at the axe core library We leverage the test from inside of it and we sort of integrate it into dev tools You can hop around and inspect the nodes real quick. That's awesome. So this is great again for Locally checking on your accessibility issues. What about ci and continuously monitoring your accessibility? Is there a story for that, too? Yeah, absolutely. So the the lighthouse library itself can be used as a standalone node module so you can you know pull that into your ci process if You want to do that or Alternatively, you could use the axe core library that is is powering these tests and you could use that standalone The the nice thing there is you can sort of decide which accessibility test you want to turn on or off Depending on sort of the criteria that you're trying to meet. Very cool. So we've got lots of great tooling for accessibility Auditing what about docs or educational material? Yes, we have that as well So if you go to developers.google.com slash web slash fundamentals slash accessibility We have a whole section there on getting started with accessibility for the web And it also includes links to our Udacity course So that's like a multi-week kind of hands-on experience where you actually like build stuff and watch a bunch of videos and kind of get Up to speed on accessibility. Very cool. I feel like my lifestyle is more accessible already. Yeah Cool. Yeah, thanks for having me today. Thanks for coming down. Awesome. Yeah, people should check out Alicast. Oh, yeah, oh, yeah