Steps for Debugging Accessibility

[00:00:00]
>> Marcy Sutton: So some debugging steps. These are the general steps that I take when I'm auditing a web page for accessibility, if I'm doing a test. Maybe I'm evaluating a pattern library, or some sort of third party tool that I'm considering using. I render it in a web browser.

[00:00:17]
So looking at raw HTML source code is cool. But you want to see how CSS and JavaScript could impact that markup in the browser. Cuz you only have so much time to test, that's a good place to start. I test the controls with the keyboard and by controls, I mean interactive things.

[00:00:34]
Like buttons, links, inputs, text areas. Not every element on the page needs to be interactive. And we'll touch on that a little later. But the interactive things, like if I'm using my mouse on it and I can't reach it from the keyboard, that would be an issue. I use accessibility web extensions like AXE and the Accessibility Insights because it can highlight a lot of low-hanging fruit issues.

[00:00:58]
That if you're catching those, you probably have major problems for accessibility. You can't catch everything with those but it's a really good kinda smoke test to figure out the health of an accessibility tool or an accessible webpage. Color contrast is something that I check. That is far and away the number one accessibility problem on the web, is color contrast.

[00:01:20]
Not being impactful enough, small font size and low contrast. Testing with screen readers, I would save this like for those of us who aren't super proficient and screen readers, you're not using them daily. It's really good to pair with someone who does use them daily, get some user testing and we'll talk about that a little more later to.

[00:01:40]
But I do fire up a screen reader, at least to do some basic testing. And I've got some cheat sheets in the applications and a little bit later on. And we'll do some screen reader testing a little bit later. So those are valuable tools. Cuz sometimes you can just get an answer, is it working or not?

[00:01:58]
Even if you don't know all of the keyboard shortcuts. And then lastly, magnification and zoom. This is a big one, because there's a lot of low vision users like way more than blind users. And so zooming in to see what's, sometimes you're holding your phone like really close because you can see it if it's close to you.

[00:02:18]
So zooming way in, we wanna make sure that we're not breaking layouts and making a really horrendous experience. So those are kind of the basic steps that I take