Getting Started Quick Guide

Video Transcript

Hello, I’m Amber Hinds from Equalize Digital. And I’m going to share with you a little bit of information about how to get started with the Accessibility Checker plugin.

I’m using an example website that we set up. This is not a real website, um, but that will give you a feel for what it’s like to install the plugin and how to get going if this was your website. So this is the homepage that we’re looking at. And this website, we’re pretending it’s a health coaches website. We’re going to install Accessibility Checker on this website and get started trying to figure out what problems might exist in order to make this website usable by people of all abilities.

Once you’ve activated the plugin, you’ll be redirected to our welcome page, which has at the top of it, a quick start guide, which tells you what you need to do in order to get started with Accessibility Checker, and how to begin auditing your website. If you ever need to revisit this page, you can get to it by clicking on Accessibility Checker in the left-hand side of your menu.

Down below the quick-start guide, there’s also some links to some frequently asked questions, and there’s a button that says “Read Full Documentation.” You can also get information here on support, and there is a link over to our WordPress.org support forum. So this gives you some information. If you like to read articles for wanting to learn more otherwise, what you are going to want to do is you can see in step one is you want to visit the settings page to configure the settings for the plugin.

I’m going to click over to the settings page so I can see here I am on the WordPress Accessibility Checker settings page on this, there are two tabs. The general tab is where you’re going to be if you are using the free version of Accessibility Checker and not Accessibility Checker Pro.

On the free version, you are able to check posts and page content for accessibility. You cannot run audits on any sort of custom post types. You notice right here, I have a portfolio of post type on this plugin, and that is not enabled. If you wanted to do all of your post type or have full sites scanning, then you would need to upgrade. We recommend that you check as many of these as possible. Um, so you don’t typically want to turn this off because you’d want to make sure that all of your content is accessible. But if you do have a post type that is not a public post type, then if you had the pro version of the plugin, you could choose not to run Accessibility Checker on those because you know that it’s not actually front end visible.

The next section here is password protection login. So if your website is on a staging site, let’s say, and it has a login with HT password protection, so that only certain people can access it. You probably would need to enter a username and password here. And that would allow Accessibility Checker to run all of its audits on the front end of your website.

The next section of settings are the simplified summary settings, web content accessibility guidelines at the AAA level, which is the highest level of accessibility require that any content with a reading level above ninth grade have an alternative version that is easier to read. So we have built in readability checks within the plugin. And if you want to meet that AAA accessibility guideline, then you can provide simplified summary text on the readability tab within each post or page. I’ll show you how to do that shortly.

You can click the link here that is “Learn more about simplified summaries and readability requirements” and go over to the documentation and read more about that. Otherwise, what you can do with these settings is you can decide if you want to prompt for a simplified summary on the post or page only when it’s required, which means only when the reading level of the post or page is higher than ninth grade, or you could choose to always prompt for one, which is nice if you want to be consistent and you want to always have a simplified summary or an abstract, let’s say in front of every article. So if you have really long articles, even if the reading level is, let’s say seventh grade or eighth grade, you don’t necessarily need to have the simplified summary, but it might be nice to display it anyway, so that all of your articles look visually similar with the simplified summary there.

Then you can choose where you want it to insert. If you choose before the content or after the content, then the simplified summary would be automatically inserted. If you are a developer and you want to control where this shows up, we also have a function that you can use. If you click insert manually, then you’ll see these functions and you can add it and control where simplified summaries appear in relation to your content (if they are filled in). Anytime a simplified summary is not filled in, then the container obviously would not show up, regardless of which implementation.

I’m going to leave this set at after the content, because that’s where I think I want mine to show up and I am only going to prompt for it when it’s required. Um, actually let’s change it to always, and we’ll make sure to save our changes.

After saving our changes, then the next thing we’re going to do is get ready to start checking. So let’s say we want to check our homepage. I’m going to edit this homepage. This particular website was built with Gutenberg. So you can see as we load this page, that the content on the back end looks somewhat similar in format to the content on the front end. And if we scroll down below the content for the page, we will find the Accessibility Checker information.

So this is the Accessibility Checker box. There are three tabs: Summary, Details, and Readability. First, we’re going to talk about the summary tab. The summary tab shows you an outline of how many accessibility errors or warnings might be present on your page.

We have over 40 different items that we test for, and that’s what this “Passed Tests” percentage relates to. It relates to the number of items that we tested for and we did not find an issue related to. And then you can see the breakdown related to how many errors.

So in this instance, there were 18 errors. There were three contrast errors. There are seven warnings. Ignored items is items that you’ve looked at and assessed and said, no, this isn’t actually a problem. And you’ve manually told Accessibility Checker to stop flagging it as an error or a warning. We will look at how to do that here shortly. Your goal, when you are trying to make your website accessible is to get these all to be zero, which will then make the tiles green.

Now there’s a note here and there are links if you want to learn more about it, but it’s really important to understand that, uh, automated scanning tools for accessibility are great at catching some of the problems, but many people believe they can only identify around 30% of accessibility errors. So it just really important that in addition to using Accessibility Checker, you also want to be doing manual testing on the front end of your website. And it’s important to you to know that if this says 100% Passed Tests, and if everything is zero, that’s great. That is a step closer to being accessible, but it doesn’t necessarily mean that this particular page or post is accessible.

There is a link here “Why 100% pass tests does not necessarily mean your website is accessible.” We recommend following that link and reading more about it on our website, in the documentation for the plugin. If that is something that you’re interested in.

You can also see here that we have calculated the reading level for this page, which is ninth grade, in which case it does not require a simplified summary. So if this were your website and you wanted to get started with making this page accessible, what you would do then is click over to the details tab.

Once I click on the details tab, I can see here are the errors and here are the warnings that have been flagged for my specific page. And then down below everything that’s green with the zero, are passed tests that the code check did not find any problems for. So the first thing you’re going to do, I’m going to look, it says, “Image Empty Alternative Text.” I can click anywhere on this item in order to expand it. This is keyboard navigable as well.

So you can see here, I have six items of code and I can look at this code in order to get a feel for what it was that got flagged as missing an alternative text. If I don’t know what alternative text is, there are “I” icons next to each of these items. And if you click on one of these icons, it will link you over and pull open the documentation for this specific warning. So you can see “Image Missing or Empty Alternative Text” and there’s information about what alternative text is, how you can add it to your images, what the impact on accessibility is, and different items.

So one of the things with alternative text is that you may or may not need it. In some instances, we flag this as an error because it could be an error if it’s incorrect, but it is also possible that some images don’t need alternative text because they’re purely decorative. So let’s take a look at a couple of these. So we can see that the first one, if I look at it, this image is called testimonial client one dot PNG. That’s the file name on the image.

So what I would do is I would go up in my page and ideally I know what these are, right? And I’m going to assume, Oh, this is this testimonial, this image right here. And so what I would probably want to do is fill in on my block settings here on the right, I can put in the name. So if this was my customer, I might put “Jane Doe” as the alternative text for her photo. Um, so that if someone encounters this image, they know that this is a photo of Jane Doe.

So now I have put that in. And if I were to hit update on my page, then I can scroll down back to the Accessibility Checker settings. And you can see we’ve gone from six to five. And that one is no longer showing up as an error. So you would want to go through all of these images and either fix them, giving them alternative text, or you might decide to ignore. And this is where we look at.

So let’s look at this one, for example, this image is it’s number one. And that is if we scroll back up and we look at our page, it’s these numbers: one, two, three. So we could determine that possibly these numbers are meaningful and that they really matter. And someone on the screen reader needs to know that this is a number one, or we could say it doesn’t actually matter, because what matters to me is that they hear, as they’re reading through the page on a screen reader, “Working with me means simple reason, simple reason,” right?

That the numbers are actually irrelevant unless perhaps these are in a particular order where they have to know that first, this then this, then that. Otherwise these numbers are just there more for decorative reasons. Not because they actually provide meaning to the text.

So in that instance, what we’re going to do is we’re going to go down and we’re going to say, number one, number two, number three, these are not errors because it’s actually correct that the alt text is blank because we do not want the screen reader to read out that there’s an image there. We want the screen reader to skip it. So I’m going to click “Ignore”. I can either just click the ignore button, but ideally, we want to put a comment here so that we have history that helps us to understand and know why it was ignored. So I’m just going to put, “This is a decorative image.”

I’m going to copy that because I’m going to do it a bunch of times. So I’m going to click, ignore this error. I’m going to do that every time. And you can see that when I ignore errors, it adds the username of the person who ignored the error and the date and time that it was ignored. And then we can close these like this if we want.

They stay visible here for tracking purposes. So that if in the future, um, you come back and you realize, Oh, hey, these are actually not errors that should be ignored. And you wanted to reopen them. Then you could. So again, if I hit update on my page, when it updates, we’re going to see the count. So it’s going to load the page and then it’s going to run. You can see that the, that the “Image Empty Alternative Text” now says two, even though it still shows these three, but they’re red. So they’re not being counted. It’s only counting these two that have not yet been assessed.

So basically what you’re going to want to do in order to edit your pages is to go through every single one of these errors and every single one of these warnings and assess what to do. And then you either need to fix the content on your page. Or if you determine that, no, this is actually a false flag and it is not an error or a warning. Then you can ignore it. Once you’ve gone through and you have done all of that. Then the summary on your page is going to reflect 100% passed tests. And these are going to have no errors, no contrast errors, no warnings. And you’re going to see any number of items that you’ve ignored.

So you can see the three images that we ignored are now showing up here. However, that’s going to tell us that we’ve gotten the page a lot more close to being accessible.

So now that we’ve looked at the summaries and details tab, we are going to click over and look at our readability tab. You remember we said that we wanted to prompt for a simplified summary, even if it was required or not. Um, you may or may not want to have a simplified summary on your homepage. I’d say probably you don’t want to. And probably it’s better to make sure that your reading level is ninth grade or below on a homepage. However, on a blog post, this would be something you’d want to fill in.

So we are going to go now to a blog post, and we are going to look at the simplified summary and how that functions within the page or post. Uh, obviously this is a lorem ipsum post, we’re using a dummy website, but you can see if I scroll down to the Accessibility Checker section, it is telling me that I have a 12th-grade reading level on this website. And then a simplified summary has not been included for the content.

So again, if I’m trying to meet AAA level guidelines, then I need to include a simplified summary. So what I need to do is click on this readability tab and I can see right here my post reading level is 12th grade, and I need to add a simplified summary, I can see a checkbox here that says the summary is being automatically inserted, um, within the content. So that’s great. I want to go back to my settings page and change where it’s being inserted. Then I can do that. I’m going to type a summary of my post here.

Again, you want to make sure that it is, has a lower reading level and it should basically summarize what the post is about. This is a fake post, so it’s sort of hard for me to summarize it. So I’m just going to put a real quick brief sentence in here. I’m going to hit submit, and once I hit submit, then you can see it generates what the reading level for the simplified summary is. And that allows me to ensure that the simplified summary is meeting the guideline and is readable for people that have lower reading levels. And since it’s automatically being inserted, that is all I have to do. It will automatically show up on the front end of my blog post.

That’s basically how you get started with Accessibility Checker. If you have any questions, feel free to reach out to us via the appropriate support channel, which is either the wordpress.org support forums if you are free or we have priority support, if you use Accessibility Checker Pro

♪ instrumental music ♪