Just in time for Christmas, we released a significant update to both free and paid versions of Accessibility Checker. The update changes the way the plugin scans WordPress websites for accessibility problems. This release is the first of a series of updates to eliminate false positives in Accessibility Checker.
The Challenge
Historically, Accessibility Checker scans have all been PHP-based. The plugin uses PHP functions to get the HTML of the page and the CSS files, then evaluates both together. This type of scanning works very well for most of our rules but makes it hard to accurately analyze CSS-based issues like color contrast.
CSS Variables
As the popularity of CSS variables increased over the past few years, we realized that it wasn’t enough to get the HTML and CSS. Accessibility Checker needed to be able to translate CSS variables into hex codes for evaluation. Without this ability, many false errors could be flagged for color contrast.
Layered Stylesheets
The reality of WordPress websites, with many plugins, parent and child themes, and CSS added in the editor, is that multiple CSS rules may target the same element. PHP-based scans don’t build the entire page or execute JavaScript. This could cause additional false positives for color contrast if the plugin couldn’t tell which CSS was taking priority.
Keeping Accessibility Testing Affordable
Many accessibility tools utilize crawlers to scan live websites or API connections to an external server that renders pages in a virtual browser like Puppeteer. These are excellent options for accessibility scanning but add server costs to every scan, which can quickly get expensive.
The Equalize Digital dev team faced a challenge. We wanted to improve accuracy and reduce false positives while still keeping a robust free version of the plugin. It was important to us that we didn’t have to charge per-page scanning fees.
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Introducing JavaScript Scanning
We determined the best way to eliminate false positives was to transition away from PHP scans and scan pages with JavaScript. This would allow us to include rules from axe-core by Deque alongside our custom rules.
Determining how to run JavaScript scans on the website’s server was challenging. Our plugin developer, Matt Boone, and CTO, Steve Jones, were up to the challenge. They developed an innovative method for JavaScript scanning without an API connection. This means improved accuracy at no additional cost to you!
Accessibility Checker now uses a hybrid approach, scanning with both PHP and JavaScript, depending upon the check it’s running. This first release changed the color contrast check to JavaScript. Over the next year, we’ll be fully transitioning all checks to JavaScript.
The Impact
Depending on your WordPress theme, the impact of this change could be a significant improvement in the accuracy of your reports.
Here’s an example of a website with a theme that uses CSS variables. Before this release, the Open Issues report on this site showed 341,194 Insufficient Color Contrast errors.
After updating the plugin and running another full site scan, the website showed only 367 Insufficient Color Contrast errors.
All the false positives have been eliminated, and all that remains are actual color contrast errors that must be corrected.
We’re continually working to improve the accuracy of Accessibility Checker and make it the best accessibility plugin for WordPress. We’re excited at the significant improvement JavaScript scanning adds.
If you have Accessibility Checker, update your plugin to see the improved scanning on your site. If you’re not yet checking your WordPress site for accessibility problems? Start using Accessibility Checker free today.
