The new way to test accessibility with Chrome DevTools – A11ycasts #23

[MUSIC PLAYING] ROB DODSON: Hey, everybody. What’s up? It’s Rob Dodson. Welcome back to the
“Ally Casts” show. Today I’m really
excited to talk to you, because I want to show you what
just landed in Chrome DevTools version 60. That is the new Audits panel. So follow me over
here to the laptop. I’m going to bust open my
DevTools with this site that I’ve been working on. And if you haven’t
opened the DevTools in a little while,
when you open it, you might actually see
something like this. I’m going to run a
little magic command here to make this show up. So if it’s your first
time opening the DevTools since Chrome 60 landed, you
just updated your version, you’ll get this little What’s
New panel that shows up. And here we see a
number of new items that shipped in Chrome 60. The one that we
are interested in is the new Audits
panel, which is this, sort of, like,
preview report card that we’re seeing over
here on the right. So if you click on
that link, it’ll take you to the Help page,
which talks a little bit more in depth about what the Audits
panel is and how it works. But the general gist of
things is that under the hood it’s using a program
called Lighthouse, which checks your site for a number
of different things, so performance, progressive web
app-iness, accessibility, and other best practices. So you run that, and it’s
going to be this report card. And you can dive into
each of those subtopics and see if you have little areas
that you need to improve upon. So in my site what I’m going to
do is I’m going to close this. I’m going to click on this
new Audits button right here. And you see we’ve got this
sweet lighthouse logo. I’m going to click
Perform An Audit. And there’s a number
of optional things that you can turn
either on or off. I’ll just have everything turned
on for this first pass, run the audit. And you’ll see
that a lot of stuff starts happening the second
you click that button. So what Lighthouse is
doing under the hood is it’s checking the
responsiveness of your site. So you’ll actually see it does
like mobile device simulation. It does network
throttling, so it’ll see how your device does
on 3G or how your site does on offline, right? So a lot of interesting
stuff there. Turning off CSS, what
does it look like then? And also testing a number
of accessiblity topics. Now, under the hood, the way
we are testing accessibility is we are using the
aXe-core library. And if you remember
from previous episodes, aXe is a super useful
tool made by the folks at Deque, which will test a
bunch of different accessibly issues on any site. If you haven’t seen those
episodes, by the way, I will leave links to them
down in the show notes so you can catch up there. But yeah, basically,
the Lighthouse program works off of aXe-core corps,
now it is just natively part of Chrome dev tools. So now that the report
card has come back, I can see my score here. Now, I have not tried to make
this site a progressive web app. So I’m getting a very
lowly 45 on that issue. But the thing that I’m
interested in today is accessibility. So right now I’m scoring
a 91, which is not bad, but we could improve
things a little bit. So clicking on that,
I can see where I’ve got a few topics
that I could tune up. So the one that I
am interested in is here where it says “image
elements have alt attributes,” or that they’re
missing, basically. So I can click on
this little dropdown. And I will explain a little
bit more about the error and how I can go
about fixing it. But if that information
is still not clear, we’ve also got a little
bit of Learn More text, so you can click that. It’ll open up a doc,
and it’ll tell you in even more detail, why
is this audit important and how do you fix it. What I think is probably the
most interesting and exciting part of this whole experience
is if you click on View Failing Elements, here is sort
of the magic moment, I can see this
element right here. But what if I click on it,
it’ll actually open it over in my DevTools Elements panel. So that’s really one
of the cool things that we get from integrating
Lighthouse directly into DevTools
itself, this ability to sort of hop back and
forth between panels. So I can see now I’ve
got this image here. I can right click
on it and say, hey, let’s scroll this into view. All right, cool, so now it
is easier to inspect and know exactly what I need to work on. So, yeah, I’ve got
this teapot here. And I know it’s missing some
alt text, so easy to fix. I’ll swap over to
my code editor. I’ll say alt a vintage
teapot with teacups, something like that. I go back to the page, refresh. And let’s try and
run our audit again to see if we have cleared
up that error, so Perform An Audit. This time I won’t do
all the other audits. So I won’t do, like, progressive
web app or best practices or whatever. I’m just going to do my
accessibility checks. It’ll run a bit faster. So that’s going to happen. [HUMMING] So the results are back. And I’ve now got a
94 in accessibility. I scroll down a little bit, and
I can see that, yeah, I still have a few issues. But I have resolved that
missing alt text error. So, yeah, that about
covers it for today. If you want to learn more about
the Audits panel or Lighthouse, I will include some links
down in the show notes. Also feel free to leave me some
comments down below as well. Or you can 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.

Be the first to comment

Leave a Reply

Your email address will not be published.