Performing an Accessibility Audit

[00:00 - 00:08] In this lesson, we're going to be performing an accessibility audit. And we'll be doing so on a site that is intentionally riddled with accessibility issues.

[00:09 - 00:13] This site is called Doggy Directory. It's just a fun little project I created for a blog post I wrote.

[00:14 - 00:22] And all this site does is give you a list of dog breed options to choose from. And when you select that and click the search button, it just displays a list of dog images.

[00:23 - 00:33] And so I want us to start really small and concentrated so that we can learn how to use the axe dev tools browser extension to see how to perform an accessibility audit. All right.

[00:34 - 00:50] And if you'd like to follow along with the lesson, make sure to fort the project first and then have a separate window open with the preview only view. Because having a separate window dedicated to the preview only version of the fourth project ensures that the extension only runs against the project code and not the whole code sandbox environment.

[00:51 - 01:01] So we're going to kick things off by having the extension scanner website to find any potential issues. And by the way, if you don't know how to open up a new browser window, that just includes the project.

[01:02 - 01:08] Go ahead in the right hand side corner, take open a new window, and then that'll open up the project right there. Okay.

[01:09 - 01:15] So we're going to open up our dev tools. And then we're going to navigate to the axe dev tools browser tab.

[01:16 - 01:23] And then we're going to click the scan all of my page button. This will take a second or two, but it will start analyzing the web page and then present you with a list of issues that it found.

[01:24 - 01:41] And so for this initial scan, it found two critical issues. And if you notice on this side here, in this little box here that axe dev tools categorizes the issues based on four different criteria, which are critical, serious, moderate, and minor.

[01:42 - 01:55] And so I want us to take some time within this issues pane to kind of get familiar with it so that we can properly understand how we can parse through the issues that were identified. So first, let's see, open up.

[01:56 - 02:08] First thing we'll see here is that there's this kind of like top bar, as you could say, and within it, it includes options for highlighting. So if you wanted to highlight where the issue was, it would kind of do that right there.

[02:09 - 02:19] And then also you could share the issue with somebody if you wanted to, and then paginate through the issues of the same type. So if there were multiple issues that met the same criteria, this would allow you to kind of click through them.

[02:20 - 02:28] Next is a description, which just gives you detail information about the identified problem. So for this case, it just says, "ensure, select, element has an accessible name ."

[02:29 - 02:54] Then it's, you get the location, the precise location of based on where the element issue was identified. So for this case, it tells us, okay, the select element, the ID reads, is where the issue is at. And then last is just the problem resolution, which just includes bullet points outlining steps to address the problem effectively. So here, it just gives you a list of potential options that you can follow to try and resolve the issue.

[02:55 - 03:15] Okay, so now that we kind of have a bit of a lay of the land, let's kind of take our first crack at trying to fix the first issue. So before we make changes to the code, I want us to actually open up the screen reader to see how it reacts when the issue is present. And as it heads up, I'm in the Chrome browser working with VoiceOver, which is the default screen reader for the Mac.

[03:16 - 04:28] VoiceOver may have some variances in it or may have some variances on what it announces, depending on the browser you're testing with. So if you're in Safari or Firefox , it may not read out the exact same thing, but you'll still be able to follow along. And if you're in a different operating system with an alternative screen reader , you should also be able to follow along. Just keep in mind that the keyboard shortcuts I use probably won't apply. Okay, and so although we've audited our landing page, I'd like us to choose a dog breed to display an actual list of images because this will help us better understand the specific issue we're addressing, which we are going to take a look at this first issue here, which images must have alternative text. So if I go ahead, head here, and let me scroll down to cattle dog because I think they have some of the cute, cute dog images, and I click search, and we'll get our list of images. And so I want to activate the screen reader and the shortcut for that is command F5. And then I want to click anywhere in the window to get voiceover to focus in on the preview window. And so with voiceover open, I'm now going to use the shortcut from, if you remember, from the screen reader lesson, and that is control option command G.

[04:29 - 05:40] [inaudible] And that will also kind of navigate by image. [inaudible] And so if you notice, it reads out the [inaudible] It doesn't have any alt text associated with it. So the screen reader actually defaults to read the file naming extension. And so obviously want to fix that because that 's not very helpful to assistive technology. It's very chat-worthy too. So now that we kind of have an idea of what our problem looks like, let's kind of go back to the project and code sandbox and look at the code and update all the image tags to include proper alt text. So we're going to start off by, let me scroll down here actually a little bit to get to the image tag. So we're going to start off by modifying the hero image on the landing page. And because this image serves a purely decorative purpose and doesn't provide any additional information to the site. And so to convey this to screen readers, we can use the alt equals empty string attribute indicating that the image is present, but intentionally lacks alternative text. And this will instruct the screen reader not to announce or provide any descriptive information about the image because if it's not really helpful, then we don't really want to read it out to them. So to do that, I already have the code here.

[05:41 - 05:50] I'm going to comment it out. You would just add alt and then equals an empty string. And then next, we're going to update the dog images. The lot which let me scroll down here.

[05:51 - 06:06] Here it is. So the logic for this is a bit more of a verbose because it adds some more dynamism to the alt text, but it'll make sense once we open up voiceover again. So I'm going to comment out the code that should be included in your lesson manuscript. So you can find that there. I just have a comment to it out here to make a little bit simpler for me.

[06:07 - 07:36] Click save. And then I'm going to go. Don't worry about this. The code's inbox gets a little confused sometimes. So I'm going to go back kind of to the preview only mood view. And then I'm going to refresh the page to take us back to the landing page and then perform a second audit with the xdev tools. And we should notice that, like clicking the rerun scan button here, we should notice that when we run a second audit that now our issue count has decreased by one. Then we could stop here, but I think it's really important to reopen the screen reader and see how it performs when it's given the proper information. So I'm going to refresh the Bowser tab to take us back to the landing page because I want to start the audit from there. And I 'm going to turn voiceover back on and then navigate by image. So but what I'm going to do now because it gets a little confused sometimes when the dev tools is open is I'm actually going to collapse it and run the audit and show you what it looks like in voiceover. So I'm going to turn voiceover on command F5. And then I'm going to navigate by image using the shortcut control option command G. If you notice, it says image not found. Voiceover responds by saying image not found because since we applied the empty alt attribute on the image voiceover no longer announces it, which is what we want because it's not relevant to the assistive technology and we don't want it to read it out. So next I'm going to select the dog read again in this case, cattle dog, but feel free to take whatever you want. And when we navigate, I'm going to see what voiceover reads out here.

[07:37 - 07:55] So cattle dog, and then click the search button. And then now I'm going to navigate by image again, pressing control option command G. And now it says cattle dog one of 18 image. Cattle dog two of 18 image and that count keeps incrementing as I shift through it.

[07:56 - 08:37] And that's because of that line of code that we added. It basically looks through and says cattle dog number of out of the total list image. This way gives screen readers an assistive technology, a little more descriptive content of what's being of what the images that's being displayed. Okay, so we've got one issue down and now we have one more to go. So let's go back to ACTev tools. I'm going to open it back up here. And then I'm going to read the description of the second issue, which I guess in this case, let me just rerun the scan really quick. So I had closed it. Okay, so the next issue is going to be select element must have an accessible name.

[08:38 - 09:30] If we expand the accordion header to reveal the panel, we'll see that the main problem is that the select element is actually lacking a label. And so with this information in mind, we can go back to the code and add an appropriate label. Okay, so we're going back to the code . And so underneath the main tag here, or then it actually, we want to add the following code. Again, this would be included in the lesson manuscript commented out here. Save it. And so as a refresher, if you remember from the labels and inputs lesson, labels provide context for an input . And so in this case, we are implementing the explicit association technique. Since the four attribute on the label, which in this case, four equals breeds, correlates to the same value as the ID on the select input. So four equals breeds on the label, and then the ID equals breeds on the select input.

[09:31 - 10:25] And so we saved our changes. And now let's go back to, let me actually refresh this, because sometimes this can get thrown off. It's not automatically refresh. So let's save our changes. We've gone back to X dev tools. And let's click on the rerun scan button. And now we have zero issues. This is awesome. And as you can see, this is because now our input has a proper label associated with it. And so now all is good. And so the build out accessible components and user interfaces for the web, it's imperative to audit and test as we implement features. X dev tools is a great resource to use as you implement features, as it helps you catch accessibility defects while you code. It can't catch every in all issues that exist in accessibility, but it sure gives you a good start. And this tool makes our thing for accessibility easier as it provides detailed issue descriptions, links to helpful resources, and a highlight feature that points you to the exact spot in the UI where the issue is surfacing.

[10:26 - 10:31] [ Ms. Lohit ]