Accessibility Checker is here to help you make your website more accessible, whether you’re new to website accessibility or a seasoned professional. If you’ve installed the plugin for the first time, follow these steps to get started quickly:
Accessibility Checker Free
This guide focuses on the features and capabilities of Accessibility Checker’s free version. If you aren’t familiar with the features in the free version, we recommend starting here.
Only interested in covering Pro features? Jump to the Pro setup guide.
1. Visit the General Settings for Accessibility Checker in your WordPress admin dashboard.
You must be an Administrator to access settings. From here, you can customize what Accessibility Checker Free will scan, how the software handles simplified content summaries, and display options for the footer accessibility statement and frontend accessibility checker. You can find the settings page by:
- Going to https://yourwebsite.com/wp-admin/admin.php?page=accessibility_checker_settings (replace ‘yourwebsite.com’ with your website URL).
- Look for Accessibility Checker in your WordPress admin left-side menu, select or hover over it, and click on ‘Settings’.
2. Navigate to your Home Page, click on the frontend Accessibility Checker icon to start a scan.
By default, the icon will be located in the bottom, right corner. If you navigate with a keyboard and not a mouse, you can reach the icon by hitting the tab key once. Please note this icon will only display if your browser session is logged into your website’s admin. If you are using a third party frontend builder like Elementor or Beaver Builder, you can use our frontend Accessibility Checker while editing content with those tools.
3. Review accessibility errors/warnings identified by Accessibility Checker on your Home Page.
You have the option to review either by clicking the “Previous” and “Next” buttons in the frontend Accessibility Checker or clicking on the “Error” and “Warning” icons that are now displayed next to various elements on the page. The frontend view will provide basic information about each error or warning, with options to review full documentation, display code snippets, or even enable a relevant automatic fix. After spending a little time reviewing what errors/warnings are being reported, continue to step four.
4. Click “Edit Page” and review Accessibility Checker’s report in the default WordPress editor.
This report typically displays in a meta box below the page content. This report will give summary data for the specific page you are editing. The summary report will look something like this:
5. Navigate to the “Details” tab to see a detailed list of errors and warnings, and click to expand each item.
This will show the same errors/warnings you already saw in the frontend view, now in a list format. Expanding an item will show relevant code snippet(s) that triggered the error or warning, as well as any related images, landmarks, and actions that can be taken. Errors are definite problems that should be fixed. Warnings are potential problems that require further human review. If you are not sure what a particular error or warning means, click on the “i” icon to access our detailed documentation.
Possible actions for each individual error or warning include:
- View on page – Takes you to the frontend Accessibility Checker and highlights that specific area to help you find it.
- Ignore – Ignores the specific error or warning, but only on this page. This is helpful for clearing individual errors/warnings from the report that require no action, or are false positives. Global ignores are available in Accessibility Checker’s paid version.
- Fix – If an error or warning can be fixed automatically, the actions column will display a “Fix” option with a wrench icon. This action will open an options modal where you can enable, disable, and configure the automated fix. If you are not sure what a particular fix will do, click on the “i” icon next to the fix to access our detailed documentation.
6. Find something in the “Details” tab you are confident you can fix.
Once you’ve found something, try to fix it in the code or content, and save the page. Every time you save, Accessibility Checker re-scans the page or post you just saved. Go back and check the “Details” report to confirm your fix worked. If it didn’t work, check our documentation which provides general advice on how to resolve each error and warning. If you need some inspiration on what to try and fix first, try finding one of these because typically they’re easy solves:
- Ambiguous Anchor Text (error)
- Incorrect Heading Order (error)
- Image Missing Alternative Text (error)
- Empty Paragraph Tag (warning)
- Underlined Text (warning)
7. You’ve got some early momentum, now keep going!
See if you can get your Home Page to 100% passed tests, for a start. And once your Home Page is done, see if you can keep going and get all your most important pages to pass. Here are a couple of closing tips:
- Remember that for each error or warning, the solution might look a little different. Some require a simple content change, others require tweaking the code, and there are times you just get to click on that “ignore” or “fix” action.
- Take this one step at a time, and don’t feel like you have to get it perfect or solve everything at once. Accessibility is a journey, not a destination.
- Accessibility Checker is an incredibly powerful tool, and there’s even more to it than what’s included in the free version. Check out our Pro features and consider upgrading if you think they would benefit you.
Accessibility Checker Professional
This guide focuses on how to get started with the powerful features and capabilities that are only available in Accessibility Checker’s paid version. Make sure you have installed Pro and activated your license before proceeding.
Want to cover the basics first? Back to the free setup guide.
1.Visit the General Settings for Accessibility Checker in your WordPress admin dashboard.
You must be an Administrator to access settings. We will dive into key settings you will want to configure for premium features in Step 2. You can find the settings page by:
- Going to https://yourwebsite.com/wp-admin/admin.php?page=accessibility_checker_settings (replace ‘yourwebsite.com’ with your website URL).
- Look for Accessibility Checker in your WordPress admin left-side menu, select or hover over it, and click on ‘Settings’.
2. Configure which Post Types you want to check.
Posts and Pages will be enabled by for scanning by default, but with the paid version you can now scan more. If your website uses custom post types (e.g. products in your online store catalog), we recommend enabling checks for any post type that displays content on the frontend. If a post type is not marked to be checked, Accessibility Checker will not scan it.
3. Define which user roles get to ignore errors/warnings.
Ignores and Global Ignores are helpful for clearing errors/warnings from Accessibility Checker reports that require no action, or are false positives. To maintain the integrity of Accessibility Checker reports, we recommend only enabling this feature for roles that are occupied by highly trusted individuals. By default, only Administrators have permission to use the Ignore feature.
4. Make additional settings changes to your preference, and then click “Save Changes” at the bottom of the General Settings tab.
In addition to the settings covered in Step 2 – Step 3, you can also change how the software handles simplified content summaries, add credentials for scanning password-protected areas, and adjust display options for the footer accessibility statement and frontend accessibility checker.
5. Click on “Full Site Scan” under Accessibility Checker in your WordPress admin left-side menu.
Accessibility Checker will provide a summary of what it will scan. After reviewing the summary information to make sure it is accurate, click “Run Accessibility Check” and allow the scan to run. The scan can take up to several hours if your website has a very large amount of content to check. When the scan is done, a message will display confirming the scan completed. If any URLs could not be scanned, an error log will be displayed below the confirmation message.
6. Take some time and review your full site Test Summary Report and Open Issues Report.
These reports will give you a birds eye view of the total number of unique errors/warnings, and how those errors/warnings are distributed. Errors are definite problems that should be fixed. Warnings are potential problems that require further human review. Clicking on a check in the Open Issues Report will show detailed information about the check, a list of all relevant code snippet(s) that triggered it, as well as any related images, landmarks, and actions that can be taken. The reports may look something like this:
You can access the Most Recent Test Summary report by going to https://yourwebsite.com/wp-admin/admin.php?page=accessibility_checker (replace ‘yourwebsite.com’ with your website URL), or by looking for “Accessibility Checker” in your WordPress admin left-side menu and clicking on it.
To view the Open Issues report, click “View All Open Issues” located in the top right of the summary report view. Or click “Open Issues” under Accessibility Checker in your WordPress admin left-side menu.
7. Click on the Fast Track tab in the Open Issues Report and review some of the top errors/warnings.
Fast Track shows you the most common code snippets causing problems, starting with the ones that appear on the most pages and have the largest number of errors/warnings. You can “Review errors/warnings” for each code snippet, and click “View Pages” to see a list of pages where that issue shows up. Resolving (or Globally Ignoring, where appropriate) errors/warnings in Fast Track that are impacting a large number of pages helps you have the biggest impact with the fewest number of actions. This report is ideal for more technical users.
8. Now that you’ve spent some time reviewing errors/warnings, it’s time to pick something to fix.
We have split our recommendations based on level of technical ability.
Highly Technical Users
Pick 3-4 errors/warnings in Fast Track that you would like to solve, which are affecting a large number of pages. It is very likely that these errors/warnings are located the website’s header, footer, or another element that’s seeing repeated use. If you need guidance on how to solve each specific issue, our detailed documentation on every individual check we run is a great resource, just find and click the “i” icons. After you have solved a handful of errors/warnings in Fast Track, go back to Step 5 and run a new scan to see if the issue(s) clear. You can continue doing this until Fast Track is no longer surfacing errors/warnings that impact multiple pages.
Less Technical Users
Find a check in the Open Issues Report that has an issue count above 5, and that you are reasonably confident you can fix. Click that check to see the expanded report, and try to fix only that issue page-by-page until you have solved it on a handful of pages (try to go for 5-10 pages total). Go back and check the report each time to make sure the total count is going down. If the fix isn’t working, check our documentation which provides general advice on how to resolve each error and warning.
9. Congratulations, you got some early wins making your site more accessible.
Now, keep that momentum going. Here are some closing tips for maximizing your effectiveness with Accessibility Checker’s paid features:
- If you purchased a Small Business or Agency Plan, you have access to different add-ons that extend Accessibility Checker even further. You can find documentation about our add-ons here.
- As noted in Step 7, Fast Track is a powerful report for finding the highest-impact problems to fix. If you aren’t highly technical, see if you can pull in a colleague to start resolving errors/warnings on that report. On large sites, one person can clear thousands of errors/warnings using Fast Track in just a couple of hours.
- For everything else, pick the remediation style that suits you. Some teams prefer to use the Open Issues report to go issue-by-issue, and find that focusing on just one problem at a time lets them move faster. Other teams prefer to go page-by-page, and get each page to 100% in succession until all the pages are done – Accessibility Checker Professional provides admin columns to help with this.
- Regardless to how you are approaching solving accessibility issues, take this one step at a time, and don’t feel like you have to get it perfect. Accessibility is a journey, not a destination.
This setup guide primarily covered features available in the paid version. If you skipped the free setup guide, we recommend going back and reviewing Step 2 to Step 5 in the free setup guide to ensure you’ve reviewed every feature Accessibility Checker has to offer.
Video Tutorial of Accessibility Checker
Watch the video if you would like to see an overview of how to get started with Accessibility Checker in video format and an example of how to assess and resolve an error.
Video Transcript
Hi, my name is Amber Hinds. I’m the CEO of Equalize Digital. And I’m going to walk you through some of the features for our Accessibility Checker plugin for WordPress. Alright, so we are here in the WordPress admin, I have a page that has been built out in the block editor. And if I scroll down below the content, I can see a Accessibility Checker report. I can see right here that this has 81% passed tests for the tests that we’ve checked. There are 12 errors, 10 contrast errors, 9 warnings, and nothing has been ignored or dismissed. If I click over on the Details tab, I can then get a look at – there’s 10 insufficient color contrast, 7 improper use of link, 2 image missing alternative text, 2 ambiguous anchor text, 1 incorrect heading order, 6 things with ARIA hidden, 2 images alternative with empty alternative text, and 1 low quality alternative text on this page.
Now if I’m a content editor, I can expand these and go through them, I can maybe start at the bottom with this warning of one. And I can see that there’s an image, it shows the affected code, it actually shows me a little thumbnail of the image. And then I could choose to go work on that image. So, for example, this is flagging, because the alt is “image of student,” but I’m not sure what low quality alternative text means I could click on the “I” icon that is next to that title. And that would link over to documentation on the Equalize website. If I know where this image is, I could scroll up in the page and find it oh, I scroll up. And here’s my gallery. And if I click on the image, indeed, I could see that so I could say, Okay, – let’s give a better alternative text for this.
I’ve typed out “young female Asian student working on laptop in class.” Because this is a much more descriptive alternative text that describes the image. Rather than just saying image of students, we’re on a college website, almost every image is an image of students. So I’ve entered that in, I could then move on to my next one. And I can see oh, look, both of these images are actually missing, they have image empty alternative text, I could move through those and go find those images, and then correct them. Let’s see, this is a picture of Fort Collins, Colorado, so I’m just gonna say “Fort Collins, Colorado, from the sky.”
Maybe there’d be a better “drone photo” or something. But anyways, you can see what I do. I can work through all of these issues. If I hit update, then you’ll notice that it will rescan my page. All the scans run on the server. So there’s no API calls, no fee, or API cost every time you are running a scan. So once it rescans, then you’ll see this section reloads. And now I can see that “low quality image alternative text” went away. I also now only have one image with empty because I’ve fixed those two. And I could go through and I could fix all of these. But let’s say I get to something like there’s 6 ARIA hidden, and I expand this. And I can see social media links. They have little icons for Facebook, Twitter, Instagram, YouTube, TikTok, and LinkedIn. And these are all hidden.
This is a warning, this particular warning means Hey, this is hidden from screen readers, is this correct or not? And if I scroll up in my page, boy, I don’t see those. So what I’m going to do is I can use this view on page link, if I click view on page, it will load the front end of the website, and it will jump me down to that section. It’ll find it on the page, and it highlights it. So now I can see oh, this is where the icon is. It’s in my footer. It’s not actually in my page. So if my footer was built with widgets, or something else, I could go to that section to fix it. But I’m actually going to just take a look at the code right here. And I’m inspecting this element. What I want to know is this SVG, the icon is hidden. But is there any text that explains to someone that this link goes to LinkedIn and indeed I see that there’s text here that goes from LinkedIn, so it’s actually correct for this to be hidden. Now, this is an example when I might use the “Ignore” feature.
I can ignore right here on this page, I can click ignore. And I can say “screen reader text is present.” As my comment, I can also ignore without a comment. But a comment helps other people know, I can see, okay, I was the one who ignored it. And this would make it in my summary, it would remove that warning. And it would show that there’s one ignored item. But boy, I know from looking on the front in the website that this is on every page. Well, in Accessibility Checker Pro, we have an “Open Issues” view, if you go to open issues, you can see all of the issues across your entire site on this particular site doesn’t have a lot. It’s a faked site. But I’ll give you a peek in just a second. And what this would look like on a site that has a lot of content. And not just two pages, this only has two pages. But we also have the “Fast Track” View. So I could go to fast track.
And I could find, let’s see where we have the ARIA hidden. So these are one of those SVGs. If I review, it’s ARIA hidden, I think compare we’re working on we’re gonna get an image of these here soon. And I could actually hit a global ignore. And what that would do is that would say, I know that this SVG is correctly hidden, so I’m going to ignore it on all of the pages of my entire site. So once I do that, then if I were to go back here and I were to refresh, we should see that we have two ignored items.
So now we have two ignored items. And I don’t have to do it on every individual page, I can actually do it on a global site-wide basis. So if you’re installing this on a website for the first time, we always recommend coming to the Open Issues tab, I’ll show you a peek. Now this is an old copy of one of our websites that we had built for ourselves long before we knew about accessibility, we installed this plugin, and you can see we’re getting 7,395 links that open in a new window or tab warnings. There’s 677 instances of incorrect headings. So there’s kind of a larger number. And this might give you a feel for what it’s like on a larger website. And however many things might have issues, we always recommend if you have Accessibility Checker Pro to come here. You can really dive into issues better and get a feel for where to find them.
So for example, if I were to just go into let’s look at, let’s say I wanted to find all of the links with ambiguous text, by clicking on this, I can see there’s 39 of them. So once what this does is it takes me to a report that shows the detail view just for those 39. I can see there’s 39 ambiguous anchor text errors, there’s an explanation that explains what it is. And it says how to fix it, “To resolve this error change the link text to be less generic so that it has meaning if heard on its own.” There’s a link to more detailed documentation. And then I can scroll down and I can see exactly where this exists. So on post title, “CSU lecture WordPress development in 43 minutes,” I can see that it’s a post, this is the issue. This is the specific link and I can see like it’s the word “here” has been linked. So I could again, I could view it and that would take me to the front end and it would highlight it, I could edit it, which would take me to the edit page.
So I can then edit or I can click ignore. If I wanted to ignore just for this one instance. But again, of course I could go to the fast track and I could add a global ignore there. Another feature that we recently added is the ability to go through a website completely on the front end. So you’ll notice when you’re logged in, if you have Accessibility Checker either the free or the pro version installed, there is a button – for a screen reader user, it’s pretty high up in the DOM, but it is, for a sighted person, in the bottom right hand corner. If I click this, this will open our Accessibility Checker report. And it will show the issues that exist on the page and we can actually toggle through them on specific page. So I can I can jump right through every issue that exists. Here’s an image with our alternative text. Here is an icon up in the header where it is a link, even though it’s functioning as a button. Here’s something that has an incorrect heading level, it’s not following the correct heading structure of the page, and so on. And so we can move through in this visual way and start to see the issues that exist on the page. I hope you found this quick walkthrough helpful.
If you have any questions, please don’t hesitate to reach out. If you’re using the free version of the plugin, you can contact us on the wordpress.org support forum. Or if you have a paid version of the plugin, you get personalized email support, and you can contact us via your plugin dashboard. Thanks so much and happy accessibility testing.