Scanning for Accessibility Issues
Running automated accessibility scans is quick and easy with axe DevTools. There are 2 types of accessibility scans available:
Scanning an entire page
From the extension start screen, clicking "Scan ALL of my page" will run an axe-core automated scan of the entire page. Once the scan completes you will be able to review the scan's results.
Scanning part of a page (component testing)
From the extension start screen, clicking "Scan PART of my page" will allow you to select a specific component or page area to run your scan within. This means a completely isolated scan will be run only within the selected element (all content outside of the selected component will be effectively ignored). To make an element selection, you can use your mouse to point-and-click any element on the page or the assistive-technology-friendly "Element Selector" to make an element selection with a keyboard (no mouse required). Once the element selection has been made, you can click scan which will then bring you to the scan's results.
Results
The results "Overview" displays the accessibility issues found during a scan. The URL in which the scan was run is displayed along with a control to "Re-run" the scan. Below that, for partial page scans, the selected element wil be displayed with a "Highlight" control to highlight the selected element/component on the page. Next, you will find the issue summaries containing the total number of issues found along with number of breakdowns which act as "filters" to view specific issue types or categories:
- "AUTOMATIC ISSUES": Issues found during an automated scan
- "GUIDED ISSUES": Issues found during Intelligent Guided Testing
- "Needs Review": Potential issues in which axe-core was not able to determine with absolute certainty were true issues. This can often occur with color contrast calculations for text over background images or complex gradients.
- Best Practice: Issues that do not necessarily conform to WCAG success criterion but are industry accepted practices that improve the user experience
- Impact (Critical, Serious, Moderate, and Minor): Issue impact categories
Issues are grouped together by their "rule". For each violated rule, an expandable button with the rule description will be available to dive into the issues found.
For each issue, the following is available:
- Description of the issue
- "Highlight" (toggle which highlights the element on the page)
- "Share Issue" (generates a shareable page dedicated to the specific issue found containing all issue data along with a screenshot)
- Link to dedicated help page for the given rule ("more information")
- "Element location" (the generated CSS selector for the element with the accessibility issue)
- "Inspect Element" (allows you to inspect the element in the elements panel of developer tools)
- Source code of the element
- Remediation guidance (information on how to fix the issue)
Saving Results
Users with a "Pro" subscription will be able to save their results using the "Save Test" button. Once clicked, you will be asked to give your test record a name. After that, Intelligent Guided Tests will be made available to take your testing to the next level! Saved test records are persistent records where all your testing data will be stored. You can always find your saved tests by clicking on the "view saved tests" menu item in the top menu bar.