Skip to content

Take 22% off using code GET22. Hurry, ends soon!

Web Accessibility Toolkit for WordPress
Get Started

Frontend Accessibility Checker

Accessibility Checker for WordPress in the admin area

The Frontend Accessibility Checker is a visual tool built into the Web Accessibility Toolkit plugin.

You can try a live demo of the Accessibility Checker here.

When enabled, it allows administrators to scan the live frontend of their WordPress site for accessibility issues like missing ARIA labels, low contrast, improper heading structure, and more, all without leaving the page.

This checker helps identify problems early and visually highlight them for faster resolution. The Accessibility Checker helps site owners find a wide range of common accessibility problems including:

  • Missing aria-label
  • Missing alt attributes
  • Low contrast items
  • Improper use of roles
  • Improper use of headings
  • Broken ARIA references

WordPress accessibility checker

By detecting these issues visually on your site, it speeds up the auditing and troubleshooting process, especially for users unfamiliar with code. Developers and site owners often miss things like improperly nested headings, empty buttons, or invalid ARIA attributes.

With the checker enabled:

  • Logged-in admins can visually scan and interact with problematic elements.
  • It overlays visual outlines and warnings directly on your site.
  • It helps you diagnose real accessibility problems that could affect screen reader users, keyboard users, or those with low vision.

Note: It’s only visible to administrators and doesn’t affect public users or SEO.

How to Enable the Frontend Accessibility Checker

  1. In your WordPress admin, go to Settings > Web Accessibility.
  2. Under the General tab, find the Frontend Checker option.
  3. Check the box labeled Display the frontend accessibility checker.
  4. Save your settings.

Once enabled, you’ll see a small floating box in the bottom right-hand corner when viewing your site as an admin. Click the “Scan Page” button to run the checker.

How to Apply Fixes Found by the Accessibility Checker

Depending on the issues that are found, you may see any of three buttons:

  • Show – Highlights the item in question directly on the page.
  • Copy Selector – Copies the CSS selector used to target the affected element for manual or plugin-based fixes.
  • Fix – Takes you to the plugin settings page where a known fix can be enabled.

Browse the rest of our docs to find the exact issue and fix combination required for your site.