Skip to main content

How to test using A11yInspect?

Run flexible, targeted accessibility tests across your webpage elements.

Running an accessibility test with BarrierBreak A11yInspect is highly adaptable and flexible. You can test all elements on a webpage to get a complete accessibility overview or focus on specific elements if you’ve made targeted changes. For example, if you recently updated a button, you could run a test only for buttons to verify that accessibility has been maintained.

This approach allows you to save time, focus on priority areas, and quickly identify potential accessibility issues.

Steps to Run a Test​

  1. Open a Webpage – Navigate to the page you want to test.
  2. Open Inspect – Right click the page and select Inspect.
  3. Select A11yInspect – Click the A11yInspect tab in the Elements panel.

note

If the A11yInspect tab is missing, see Unable to View A11yInspect Tab in Inspect.

  1. Choose Element Type – Select a specific element (e.g., button, link) or test all elements.
  2. Run the Test – Click Test Now.

6. Refresh if needed – Rerun tests after changes by clicking on Refresh.

Understanding A11yInspect Results​

Results are displayed in tabs according to Web Content Accessibility Guidelines (WCAG) 2.2:

  • Overview – Summary of all issues identified.
  • Fail – List of accessibility failures that need fixing.
  • Validate – Issues that require human verification.
  • Pass – List of elements that have successfully passed accessibility checks.

note

This feature is available only for A11yNow Enterprise subscribers.

  • Suggestion – Recommendations and best practices to improve accessibility.

Additional A11yInspect Features​

A11yInspect also provides you with additional features to check for accessibility:

  • Structure – Displays the page’s headings, landmarks, and overall structure for accessibility verification.
  • Contrast Checker – Tests foreground and background color contrast according to WCAG standards.
  • CSS Overview – Shows colors, fonts, and color combinations to avoid for accessible design.
  • CSS Unit Converter – Allows conversion between different CSS units (px, pt, em, rem, %) to help ensure consistent and accessible sizing across the page.