Amber Hinds, Founder & CEO of Equalize Digital, goes over how we use the Accessibility Checker plugin to audit, troubleshoot, and fix accessibility issues that can be found on websites.
Read the Transcript
Hi, this is Amber Hinds. I’m the CEO at Equalize Digital, and I thought I would make a quick video to show you all what we do with accessibility testing in bulk, and how we use our plugin Accessibility Checker to scan websites for accessibility problems.
We are on a new website, let me actually flip over to the front-end, it is a WordPress multi-site, you might notice it has ‘My Sites’ right here. But I’m going to flip over to the front end, just to give you a quick little sneak peek of this website.
This is a quick peek at what their homepage looks like. It’s been built out, I think we’re waiting for some possible text, so you might find a little lorem ipsum. But I’m pretty sure that we’re 90% there, or 95%. This is what the website looks like and I’m going to flip over to the dashboard. I’m going to go over to Accessibility Checker, you can see that right here.
The first thing I’m going to do is I’m going to click the “Open Issues” tab. There’s a couple of different places when you have the paid version of Accessibility Checker that you can see issues. We can see “Individual Open Issues.” This is every issue that might exist on this website, and we can see the Post or Page that it is on, and what the post type is. We can see this particular is a post that we created for them called RSP, Resource Sharing Project Resources, we can see if it’s an error, or a warning. An error is something that we definitely know is a problem that needs to be resolved. And a warning is something that may be a problem or may not be a problem, and it’s going to require someone to manually look at it.
Then we can see what the issue is we can see this particular one says “ambiguous anchor text” and then we can see the code. Here we can see the word “here.” There’s a couple of options: I could go view, or I can edit, or I can ignore. View would actually, if I click this, I’m gonna click open in a new tab because I like lots of tabs and not losing my place and things. I’m gonna click open in a new tab.
This takes me to the front-end of this particular resource, and I can see the resource. And I can see this is that link “here” right here. Also, there’s something that says six, not totally sure what that’s about. That’s a little bit weird. But I can see this is the link here.
Now if I close this, and I go back to my “Open Issues” I can see an Edit link. This would take me over to the Edit Screen for this particular resource, which is Building Cultures of Care: a Guide for Sexual Assault Services Programs. And I can also click “Ignore.” And if I click ignore, it opens a box where I could put a comment in to say “why I am closing this out and why this is not actually a problem.” And I then it would stop it from showing in my reports.
We’ll go through some of these in just a minute. I want to walk you through the different places where you can see problems. So this is where we can see all of the problems that exists on the website. And currently there are 905 unique or sorry, 905 issues in total that can be found on the website. As you can see, this is like an individual thing. This one link going to this one PDF document is here. But there’s 905 other items.
The other place that we can look at issues and this is where we like to start is under the “Fast Track.” If I click on the “Fast Track” tab, why I like this is it actually groups the code snippet that is causing a problem or has flagged an issue in Accessibility Checker. We can know if there’s something that we could fix one time, and it will resolve a lot of problems. This one is a really great example. Right here, we can see that we have an image. The HTML tag for an image, I can see the source of this image.
If I wanted to, right now I can just, I’m gonna open this in a new tab, we’re working on building features, you can quickly like open them, or we can display them for you right here. That’s coming in the future. But right now, the way I’m just doing is I quickly open this in a new tab.
This right here is flagging for me something that I would need to fix. But what we can actually see is that this particular image, it’s on 320 pages, and it’s failed one issue, I can then click Review Issues and I can see it’s an image with empty alternative text. If I don’t know what that means, or why it’s a problem, what’s really helpful is you can click this eye, and it will open up for you our documentation: “Image Empty Alternative Text.” There’s a whole table of contents here if you want to jump to a section, but you can see for example, it says what is alternative text? How is it added to images in WordPress? There’s some examples of here’s how you would add it in the Block Editor. Obviously, depending on how you edit your sites, it’s gonna be a little different. But it says “Why do we check for missing alternative text? What’s the impact on accessibility? Why is alternative text important?” All those sorts of things. That information is available to you here.
If you’re not sure what one of these rules or checks means you can click there to learn more about it. Otherwise, we could click View Pages, and we could see all Pages that it’s on. If I do this, it’s gonna expand a big list, and I can see, okay, here’s where it is, on the strong foundation for healing shelter and sexual violence, I can either edit or view that page, or I have the option of putting in a “Global Ignore.” If I assess this image, and I determine, hey, this image is not actually a problem, then, perhaps this image and how it’s being used on the page, it is 100% purely decorative. I would actually enter a Global Ignore, which would ignore it for all pages on the website.
I’m gonna scroll down real quick to the bottom of this Pages section, and I’m gonna close it. So now I’ve got all texts on this Resource Sharing Project. Now, you’ll notice that this is fixed. But if I go back to my Fast Track, and my Open Issues tab, even if I refresh, it’s still gonna say 320 pages affected. Why is that? It’s because when you just edit something in the footer, or the header or sidebar, like any sort of widgets or other areas that is not in the page content, it doesn’t automatically trigger a full site scan. We’re not trying to overload your server, while there’s a couple of options.
Let me go over to Full Site Scan, opening it in a new tab, because you know, me, I love new tabs. What we can do is we can have this setup to every week, and run it so we can say okay, we’re going to run it once a week, and then it will catch all of our changes. We could say, hey, let’s just do one right now, I wouldn’t normally. If I’m working through this in my process, I don’t run a new a new scan every time I change one thing, because it’s, you know, like what we do in our process is we go through, we make a lot of fixes. And then we’re like, hey, scan the whole thing. But for our purposes, right now, I’m going to just do this because it’s it’s only 320 pages, it shouldn’t take too long to run. And I think it’s helpful for you to see how that would go away.
I’m just going to click New Accessibility Check. And it’s going to give me a summary of everything is going to test. These items, by the way, I didn’t show this in the beginning, which I probably should have done. I didn’t go through the setup. If I’m on the General tab, you can choose what you want to check. On this website, we are checking the Post, Page RSP_Resource, which is a resources post type that we created for them. And then the tribe_events, which is a post type that comes from the event calendar by modern tribe, which you can see is added over here. We’re not checking the venue or the organizer, because we’re not using those, we actually have those set with redirects. So nobody would even be able to access them. We don’t need to bother scanning them because they’re not available.
This is where we would set up the post types, and we need to have them checked. Then we would go to “Scan.” We would then see, okay, this is everything that’s going to check and we can click Run Accessibility Check. It’s going to queue it up and it’s going to run through them. It only does a few at a time because it doesn’t want to overload your server.
You do not have to stay on this page. As it checks things, you can leave the page, there’s no reason to stay here. It does log for you what it’s doing, and it’s starting to check and then it’s completing a check it started completing. If a particular check runs into a problem, which sometimes happens if there’s strange, like weird HTML code or other issues, it could potentially cause an error and it would tell that for you in the log. Which is really useful for debugging, if you’re like, I have a page that says it has no problems, but I know that it has them. Or you know, it’s not saying this particular thing, so that’s helpful.
I’m gonna let this run, I’m gonna leave the page and we’re going to continue going. One of the things you will notice is you see, we’ve already checked 24 pages. If I go back to my open issues, I’m going to inspect this, if I hit refresh now, as it checks is going to reduce this number. We’re going to go from 320. I’m gonna hit refresh on this page. Now you can see 290. Once the scan is finished, this whole problem will completely go away.
I will move on to the next item on my list in Fast Track. This one is oh, hey, look, it’s another image. I’ve got another image tag. It’s on nine pages, I’m gonna click Review Issues. This is another one with an empty alternative text. It happens to be, do you see this? It’s an SVG page here, SVG, let me click on this real quick. I’m going to just open it, I know what it is, but I’m going to open it so you all can see what it is. It’s this right here. If I were to view the pages, I could see it’s on the about page, the contact page. Let’s just look at it on the about page. I’m going to click View. Oh, I didn’t open a new tab.
You can see it’s this image right here on the about the Resource Sharing Project page. Now I need to ask myself again, is it correct that this image does not have alternative text or should it have alternative text? This image as we saw, I’m going to go back to that in just a minute, but it’s on nine pages, basically, for this website is on every page at the top, it is 100% decorative, it doesn’t really convey any extra meaning. You don’t need to know about this image or know what it is a graphic of, because it’s just random shapes and an interesting designer pattern.
They’re not honestly actually created, like we didn’t design them to have any meaning. It’s the same on every page. You don’t need to know about this image in order to get the key information about this page, right? It is correct. This image does not have alternative text. We don’t want to slow people down screen readers and make them listen to it. We don’t want to have a description that’s like, you know, graphic design of yellow, green, blue, and black shapes in a stair stepping pattern or something that doesn’t make sense. It is not necessary.
Let me just go back real quick, we’re gonna see look. So we’ve got nine pages. And I don’t, I can go to every individual page. I could click Ignore on that and say this is correct. But I don’t want to have to do that. Let’s say they use this image again, in the future on a new page, I don’t want it to show up as a problem for them. In this particular instance, I’m going to click “Global Ignore” because it is actually correct. This image does not have alternative texts, that is the right way to go. I’m going to do that. Now it’s gone. It’s not a problem.
Our scan is working its way through. We only have 174 pages now seeing this as a problem. I’m going to continue working through this list. I’m gonna work through a few things. I won’t necessarily do them all. I want to show you how we start assessing websites. I’ll keep going through a few. The next one is we’ve got a div it has a class of WP spacer block. I’m gonna click Review issues. This is saying ARIA hidden. Oh, yep, there it is. Aria hidden equals true. And basically, what this saying is, don’t tell screen readers that this container is here. Well, this is a spacer block that adds 25 pixels of space, it’s being used on three pages. Yes, it is correct. No one on screen here needs to know there’s a block here, that’s just adding space between elements. Again, global ignore, this is not really a problem. I’m going to go over to our pages real quick. I’m on the pages. So on the pages screen, I can now see what problems may exist on this website. So I’ve got the for state territory administrators page, and I can see our accessibility checker columns. I’ve got the number of past accessibility tests is 90%.
On this page, there are no errors. There is one color contrast error that it thinks is present. And there are seven warnings. So for pages that we’re remediating, I’m going to go in and I’m going to go through these and my goal is to get it to say 100%, pass test, and zero. For all of these things, I might have some ignored items where I may have resolved problems. So I’m going to click Edit on the for State and Territory administrators page. And it’s Dubard page with the block editor. So I’m going to scroll down beyond it. And we can see this is our report. So we have zero errors, one contractor four warnings, three ignored items. And 90%, it has an 11th grade reading level, we have not put in a simplified summary for this. So I’m going to go over to details. So the first one is insufficient color contrast, I’m expand that. And I’m going to see this may be the same problem. Take the course, yellow color with white. Let me go up here. Take the course Yep, this is a false positive. So I’m going to also ignore this and click ignore.
When you’re on a page, you can actually enter specific comments about it. So I’m going to actually put a note get rid of my typo, maybe right. So I’m gonna click ignore. Now it’s ignored. That one’s done. Image empty alternative tests. And we’ve got, hey, let’s see, this one has already been ignored. That’s our global ignore. So I can’t I don’t worry about that. The loader GIF I determined that was a problem. That’s something that needs to stay open. Again, I’m not ignoring it, because it is actually a problem that’s going to be fixed. And then the let’s see, we’ve got this healing services computer screen dot png. So I’m going to go up and I’m gonna look at this, oh, this is right here. So I need to ask myself, does this actually need alternative text? Or is it decorative? In this instance, we’ve put this here really to add visual interest. I don’t think it’s important for them to know that, oh, if you take this online course, the homepage is gonna have a big banner on it with a title and some pictures of women like I don’t think that that is important. For someone if deciding whether or not they want to take this online course. This is a purely decorative image. So rather than adding alternative text to it, I am going to ignore it. I’m gonna click ignore. And I’m going to say image is back nor logs, it can we’ve done everything. Then we’re going to go to ARIA hidden. So we have two things that have been ignored. So this first one, that’s our big SVG, we can see it’s already ignored. We can skip that.
And then we’ve got a WS spacer block that is 25 pixels. Now, this showed up on multiple pages. So we saw and we already have a global ignored, this spacer block is only 20 pixels, they’re not combined, because technically, their HTML code is different. So again, I’m just going to ignore that space, or you can hide that. Or you could just say, Hey, I don’t really need to comment on this, I’m just going to ignore it. Okay, so that’s everything under ARIA hidden. So I’m gonna go back up to fast, I’m gonna close it. And then I’m going to see my link to PDF. So again, SHSP, frequently asked questions. This is warning me about the PDF, I will show you real quick because it’s useful. So if I click the I, and I get the documentation on our site, we have a ton of information about something clicked on it, how to resolve the link to PDF warning. So basically, it’s telling you how to find it. But these are our guidelines on PDFs. First of all, is it really necessary is way better to use HTML, or like a page on your website is a better way putting on then a PDF. And then we have some guidance on different software programs that you can use in order to test PDFs for accessibility. We have the basic principles of PDF accessibility, which is that they should be scannable, searchable, legible and readable for everyone, including people that on assistive technology. And then we have some checklists for PDF accessibility, so pre checks, Document Properties, structure, tags, objects, so this is kind of a long list, and things like that. So and then another thing is warning users when linking to the PDF.
All of this is here in our documentation. I don’t because there is a PDF, I don’t do anything. To close this out, I’m not going to ignore it because I have not tested this for accessibility. So this is still a warning that needs to stay present on the site. But one thing that I could do to improve it, let me see what this is called DME SSP frequently asked questions, let’s go over to where that is, I don’t know where that so I’m gonna do. Let’s get the other version of that. Here it is. So this is a link to a PDF. And I’m going to quick edit this link, because we like to warn people that things are PDFs. So I will do that to improve it. So now it’s clear that this is a PDF. So that’s what I need to do there. And then can you see my picture again, so I can hit my update button. So I’m going to hit update on this post. When you update a post or a page, it will rescan. And you can see now that all that’s left on this are the one image in the alternative text one link to PDF. So we have zero errors, zero contract, there’s two warnings, and six ignored items. So we’re now at 95% instead of 90%. But for my purposes, right now, this is the closest I can get this page.
Anyway, basically, that’s how we would approach it, we go through fast track first because we want to get things that can be across the whole site and get it resolved. And then we go page by page where we look at the problems that have been flagged, we either fix them in the content, we assign it to do to a developer, now if you’re a developer, you might be able to just go ahead and make the fix right away yourself right then and push up a code change. So either fix it in the content, assign it to due to a developer or if your developer make a code change, or we intern ignore if it’s something that we have manually tested and have confirmed as either a false positive or is actually accessible. And ideally, we’re putting notes on them to provide information. And then the final option is we leave it open because it is a problem that our client actually has to assess, and it’s not part of our scope. But hopefully, this is helpful at figuring out a way that you could include Accessibility Checker into your processes to help you go faster, move faster through a site and also leave some things for clients that so that you don’t have to create a long list for them. They can just see oh, I need to go through every warning or every error that’s been left open. If you have any questions about using Accessibility Checker, please feel free to reach out to me. Our website is equalizedigital.com. I would be happy to answer any questions. Thanks so much.
