Easy Accessibility Testing with aXe
aXe is a free, open-source accessibility testing tool that runs right in your web browser. Here's a quick guide for getting started:
Step 2: Go to the page you want to test.
Step 3: Open up your browser's developer tools menu. You can accomplish this by right-clicking on the page and selecting "Inspect" or "Inspect Element."
Step 4: Select the aXe tab in the developer tools menu. In Firefox the tab is named "Accessibility" or "aXe Accessibility Audit."
Step 5: Hit the big "Analyze" button.
Voila! You've just run an accessibility test on a webpage.
Great! So what am I looking at?
On the left-hand side of the aXe dashboard, you've got a handy list of accessibility issues and how many times the issue occurs on the page. When you click on an issue, a detailed explanation is provided to the right of the list and includes:
- A description of the issue with a link to additional info available for free on Deque University
- A snippet of the code that has caused the issue
- Guidelines for fixing the issue
- Information about the severity of the issue and which accessibility guidelines are being violated (e.g. WCAG 2.0, Section 508, etc.)
- And the "Inspect" button which will bring you to the problem-code in your browser's page inspector
Here's a video-guide for you multi-sensory learners:
Wow! I had no idea accessibility testing could be so easy!
I'm glad you're excited! But don't forget - automated testing is only part of the accessibility process. In addition to running aXe and other accessibility checkers, you'll want to do some manual accessibility testing. For example, you could perform some manual testing with a screenreader.
And if you'd like to take a deeper dive into the aXe API and some of its more advanced uses (like integration and unit testing) check out the aXe-core page.