Accessibility Audit Exercise

[00:00:00]
>> Speaker 1: Cool, yeah, so let's head into the final exercise here, back to our same workshop page as normal and we have this beautiful random image huge thing. So the kind of thing that I was hoping we would do here is just spend a few minutes. Probably the easiest thing to do out of the box would just be if you're in whatever major browser to open your DevTools, all the Chromium ones will have Lighthouse.

[00:00:24]
If you're not using a Chromium browser, then we can talk about some of the other things. But if you're using a Chromium browser, to use Lighthouse to pick accessibility only and then to analyze the page load here. If you are not using a Chromium browser, then I would recommend getting the free Dequeue Axe plugin which will work for any browser and then that'll add a new tab here Axe and then run that audit there.

[00:00:47]
So if Chromium just use the built in Lighthouse, I would say if not Chromium, grab the free Axe plugin. We'll get that installed, we'll run it and then feel free to solve as many of the things as you would like to solve. When we come back after the break, we'll kinda talk about why the violations occurred and solve them together.

[00:01:03]
But yeah, I think the idea here is basically just doing your first accessibility audit, seeing what kind of stuff comes back. What kind of stuff affects the score according to Lighthouse and why, and then we'll work through all that stuff together. So go to the page and I'll do an analyze page load.

[00:01:23]
It's gonna go and do a full refresh and it's gonna run a bunch of rules against all the markup and test some things and all that stuff. And it gives us this beautiful score of 38, which was as low as I could get it without really, really mangling the website.

[00:01:37]
So cool, for those that haven't used Lighthouse yet another pitch to check out my DevTools course. But yeah, it's really great, it provides you with a score out of 100, a list of things to fix, a list of things that you did well, a list of items to manually check.

[00:01:53]
Things that it's having a hard time proving one way or another. And you'll also notice that under each item, when you select it and expand it, it will link to some really well written articles. And those articles may be on Deque site, they may be on Google's site, they may be on Chrome's site, wherever they feel, the best kind of explanation of why these rules exist is there.

[00:02:17]
So I find this a really great starting place because it'll not only help you identify what might be wrong with your site. But if you're confused by it, which I often am, it gives you a great link to kinda go read more and hopefully better understand what it is.

[00:02:29]
So we'll just go through and fix a couple of these, in this other tab, I've got the code open and I will close all the tabs except for the audit tab. And we'll just kinda start going through. So it says one thing is Aria hidden is present on the document body, which means that screen readers will be inconsistent, they might not work very well.

[00:02:50]
So we can find this kind of Aria hidden and we can remove that, Aria hidden equals true, that was a bit of a cheeky one, just there to kind of test things out. It looks like we also have Aria hidden, maybe we don't have it somewhere else. Cool, so moving down further, we've got this user scalable no used in the viewport.

[00:03:10]
So I think up at the top we should have this meta viewport. And it's saying that user scalable no disable zooming and disabling zooming is very problematic for users with low vision who rely on screen magnification. So kind of like we talked about at the very beginning of this workshop, so we can go ahead for now and just remove this, allow users to zoom.

[00:03:28]
I think one thing I'm always careful of, I think getting really good at accessibility will be excellent for your career, but it also brings you into a bit of conflict with design sometimes. I do think one important thing about becoming an accessibility expert is learning how to lead with empathy.

[00:03:46]
And explain that while the visual design dream of the website may be one way why it's really important to not disable this. A lot of times you'll be asked to hijack scroll to provide a cool, smooth scroll or disable zooming because everything's pixel perfect. Or get those focus rings off the buttons because they don't match the design system or rewrite checkboxes cuz we want them to be a star instead of a box.

[00:04:11]
Or all these different things come up. And I think an important part of being an accessibility specialist is leading those conversations with empathy and being like, yeah, your design looks fantastic. But here's what we can do while staying kind of compliant, while staying an excellent experience for people.

[00:04:25]
It's just a constant theme that keeps coming up is like, I can totally see people wanting to disable zoom, but it does have these bad unintended consequences. So we'll go ahead and remove that, keep going, background and foreground colors do not have appropriate color contrast. So these are really nice where it not only just tells you there's an issue, but it actually tells you which elements are failing here.

[00:04:46]
So we can see the HERO and the menu button, so if we go to menu button, this blue on white is not working. So we can just contrive to make it blue on black for now. There's also a DIV description, so this is also maybe too light, I'm sort of just kind of guessing at some of these things, we've got a card.

[00:05:10]
Where is the card? Div class card, and again, maybe, so let's fix a few of these things. We'll reload the site, things are a little bit sharper looking. And then we can kind of take an audit of how we're doing so far and see how much we've improved, so it was that camera 36 or 38 out of 100 before, fix a couple of things on here.

[00:05:30]
And cool, we've jumped up to like 59 and we can keep going with this, images don't have alt attributes. So it finds a bunch of images, so we can kind of see those, they are pictures of something. These don't look necessary at all for the document, so what do we do when they're not necessary?

[00:05:50]
>> Speaker 1: Empty strings?
>> Speaker 1: Yeah, That's not my normal style of teaching, but it felt right, I'm glad we went for it. Cool anyway, yeah, I mean, you can kind of see here let me know if there were any that are specific to go through. But kind of as we go through these and keep running these audits, they should get higher and higher.

[00:06:09]
The other kind of important thing to mention is that with all of your lighthouse audits or whatever tool you're using, why didn't these get alt attributes?
>> Speaker 1: There's one more image.
>> Speaker 1: Did I miss one?
>> Speaker 1: Yeah.
>> Speaker 1: Aha, this is the one up here, it's just also kind of just a HERO image, it doesn't actually provide any value to the website anyway.

[00:06:43]
The other thing that I wanted to mention with all of these performance audits is not only do the things that are kind of like in red and alerting you, cool, we're kind of heading on up there. But also make sure that you always check out this additional items to manual check, this is like one of my favorite things about Lighthouse, yeah.

[00:06:58]
>> I noticed you have your alt empty, right?
>> Speaker 1: Yeah.
>> Speaker 1: You don't want it to be accessible.
>> Right.
>> Speaker 1: Then do we have to put tab index is equals to minus 1.
>> Speaker 1: So the images are not tabable by themselves, so they won't be tabable. But there was a question in the chat earlier which was kind of an advanced case, which was saying we have a list of links, and instead of text.

[00:07:19]
We have images for the link, like arrow forward, arrow backward, and then we want the arrow image not to read, but the link is still tabable. We can get into complicated cases, right? So in that case, we could leave the link tabable, but make the image alt empty.

[00:07:35]
So sometimes you'll get into a little bit of a more complex situation. But in this case, if you have a H1, then an image tag with some abstract piece of art and then a paragraph, the image making that image empty, all, it will never have been tabable. So as you're tabbing through, you'll go from the H1 into whatever form controls and you'll skip over the image.

[00:07:57]
Yeah, great question, and then, yeah, the other thing is it will tell you things that it could not necessarily prove. So are the interactive controls, are they all keyboard focusable? Do they clearly indicate their purpose and state? Look at the tab order, is it logical? Things like this, so I really love these tools because they give you stuff to fix and they also give you a list of things that they don't know.

[00:08:19]
And you can kinda take it from here and start adding your automatic tests and things like that.