Testing Shadow DOM with aXe Coconut - A11ycasts #26

Key Takeaways

[Music] hey everyday what's up it's Rob Dodson welcome back to the alley cat show today we're gonna be talking about how you can inspect shadow Dom for your elements using the latest version of the axe chrome dev tools extension so if you are familiar with axe from some of our previous episodes it's basically a really awesome little library created by the folks at DQ systems I'll let you run a set of accessibility audits against your whole page what is really cool about access they've recently launched a new version which they're calling ax coconut and this is kind of like their version of a Chrome Canary or Firefox nightly it's a way for developers to try out the sort of like bleeding edge of their extension and get your hands on some of the new features before they've shipped in the the main line so what we're gonna be doing today is looking at a little widget that we created and employing one of the best new features of ax coconut which is shadow Dom inspection as gonna you know when you're building any sort of like custom element or web component shadow DOM while it's very useful for style encapsulation does create issues for accessibility particularly for things like Aria the reason that is is because shadow Dom creates these little shadow boundaries scoping bubbles and so all of your ID references the ability to actually walk the Dom all those things kind of get broken by the shadow boundary it makes it pretty tough for any sort of like audit tool to see what's going on inside of there in the latest version of ax coconut the team has done a really really good job sort of like tackling this problem figuring out how to do shut it on inspection so that's what we're gonna be covering today so follow me over here to my laptop I've got this little sort of music player that I've been working on and you can see there's a few things happening here we've got some some band artwork we've got the name of our band showing play and mute button and a little progress bar and so anybody looking at this would be like okay cool I think this thing you know looks like a music player to me seems like it should work let's drop it into our site but there's actually under the hood a few places where I've made some accessibility mistakes normally those would be totally missed if I was using any sort of audit tool it would just see the element it would stop at the shadow boundary and be like I can't really see what's going on inside of there so I guess that's okay using ax coconut though we can analyze the page and as we wait a few seconds we'll see aha you've got let's see two four we got about five issues that we need to cover in this element so walking through these one by one the first one we can see here is that we've got some Aria attributes which need to conform to valid names what's really nice about using coconut and the the access tension in general is it's got this little highlight button right here which we can click and I'm actually show us which elements in the document are failing that audit so we can see here our play button is failing it we could click this next button and we can see also that our mute button is failing this audit so if we go and we look down here it'll tell us the location of the elements we know it's inside of this audio player custom element now I'm actually using shadow Dom inside of this so it's actually pierced the shadow boundary and it's going to this controls div and it's looking at our how to toggle button and what tells us right here to is the source of the element we can see okay cool it's got a roll a button that seems fine it's got a tabindex that seems fine ah but if we look at Aria here it says aria-pressed but we've got a little spelling error there so it's detected that it's a roll of button it's detected that aria-pressed is sort of like an optional state that we can give to a element with a button role but it's also found that we've misspelled that state so we can fix this pretty easily we can go over to our editor find our toggle button and just look for all the places where we said are you pressed with one s I'll select all those highlight them all and then tack on an extra s so we spelled that correctly refresh the page analyze again and we should see that yes we have fixed that error okay so there's a few other things do we've got buttons here which need discernible text again we can highlight those I can see ah yes again it's our play button so what's going on here is we've created a button element and we've given it the right you know ru role and everything so it's announced properly to the system that it's a button but if we click on inspect a node let me go and look at the accessibility inspector we can see that it's computed name is an empty quote and that's because a button element it's going to compute its name in a few different ways you know you could associate it with a label element you could give it some text content it could compute a name that way but in this case since we've just used an icon as the content of this button the system really has no idea what to call it so we can say it's a button but I can't tell the user if it's play or pause or mute or what so to fix this one since we don't really have room on screen for text or anything like that we know that we can find the button and we can just maybe give it Aria labels so this is our play button so we can say are you label equals plate and we'll do the same thing for the mute button say are you label equals mute okay go refresh the page fire up X coconut once more and we should see now that we only have one error left and this one is actually pretty cool so we've got an image here which needs alt text now again most of your familiar putting alt text on your images the reason why we want to do this is because someone lands on that image with a screen reader and we can describe the content of the image to that user in this case why this is sort of a cool audit is the way that I've actually structured this audio player is this area up top where we're loading our image it's inside of the shadow Dom so we've got it inside of a shadow root but we've also got it inside of an iframe so X coconut is piercing the shadow boundary it's then piercing the iframe and it's like okay all the way down here at this level you've got an image that needs proper labeling that to me is like super cool that it's able to go down to that level of depth and so to fix this we can just pop over to the iframe where we're loading our image and we can see we've just got our band photo here I'm gonna give it some alt text and we'll say let's see what is the name of this band again the band is called the coconuts okay so let's say the coconuts go nuts playing in a cafe something like that I'm terrible at writing alt text but I hope I hope that suffice is is a good summary refresh the page hit it with ax coconut one more time and boom okay so everything that we could do an automated test for we're currently passing now it's important to understand that anytime you're doing automated testing with a tool like axe or light house or anything like that there's plenty of things that an automated tool can't catch so it's not a full-on substitute for actually putting the control in front of a user actually having someone interact with the thing and make sure it's it's usable you know for someone using a screen reader Braille reader someone who you know prefers to use the keyboard to interact the page right you want to do usability testing as well as automated testing but I think ax coconut is super awesome if you want to check it out you can check out the the blog post by the folks at DQ announcing how to download the Chrome extension and also how to use axe core 3.0 alpha a lot of really cool stuff there so definitely go check that out that about covers it for today so if you have any questions leave them for me down below in the comments or hit me up on a social network of your choosing as always thank you so much watching and I'll see you next time [Music]