 Hey everybody, what's up? It's Rob Dodson. Welcome back to the Alicast show. Today we're going to be talking about how you can inspect Shadow DOM for your elements using the latest version of the Axe Chrome DevTools 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 that lets you run a set of accessibility audits against your whole page. What is really cool about Axe is they've recently launched a new version, which they are calling Axe 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 main line. So what we're going to be doing today is looking at a little widget that we created and employing one of the best new features of Axe Coconut, which is Shadow DOM inspection. As many of 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 boundary 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 Axe Coconut, the team has done a really, really good job sort of like tackling this problem, figuring out how to do Shadow DOM inspection. So that's what we're going to 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 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 Axe Coconut though, we can analyze the page. And as we wait a few seconds, we'll see, aha, we've got, let's see, two, four. We've 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. And what's really nice about using Coconut and the Axe extension in general, is it's got this little highlight button right here, which we can click. And it will actually show us which elements in the document are failing that audit. So we can see here, our play button is failing it. We go click this next button. And we can see also that our mute button is failing this audit. And 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 gone into this controls div. And it's looking at our how to toggle button. And what it tells us right here too is the source of the element. And we can see, okay, cool. So it's got a roll button. That seems fine. It's got a tab index. 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 roll. 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 ARIA pressed with one S. We'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 too. We've got buttons here which need discernible text. Again, we can highlight those. You 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, ARIA roll and everything. So it's announced properly to the system that it's a button. But if we click on inspect node, and we go and look at the accessibility inspector, we can see that its 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 it 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 ARIA label equals play. And we'll do the same thing for the mute button. Say ARIA label equals mute. Okay. Go refresh the page, fire up axe 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 you are familiar with 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 you've got it inside of a shadow root. But we've also got it inside of an iframe. So axe 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. We'll 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 we'll say the coconuts, coconuts, playing in a cafe, something like that. I'm terrible at writing alt text, but I hope that suffices as a good summary. Refresh the page, hit it with axe 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 lighthouse 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 usable, you know, for someone using a screen reader or Braille reader, someone who, you know, prefers to use the keyboard to interact with the page, right? You want to do usability testing as well as automated testing. But I think axe coconut is super awesome. If you want to check it out, you can check out 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 for watching, and I'll see you next time.