Test Web Accessibility Using the Axe Browser Extension
Test web accessibility using the axe browser extension in Chrome, Firefox or Edge. Axe is an accessibility testing engine for websites and other HTML-based user interfaces.
The tool will run on your site and sort the errors it encounters in order of performance from Critical down to Minor. When you select issues, you'll get a detailed page of of what went wrong and how you can fix it.
Amberley Romo: [0:00] To test for accessibility using the axe browser extension, download the extension for Chrome, Firefox, or Edge. In this video, I'll show the Chrome extension.
[0:11] Visit the page that you want to test in the browser. I'll use this page that's designed to be an example of an inaccessible page. Open up DevTools, and go to the axe tab. We want to test the whole page in this instance, so select SCAN ALL OF MY PAGE.
[0:29] When the analysis is complete, axe reports the total issues identified and the breakdown and the impact level. If the same issue is reported multiple times, it'll group those together. For example, we have four instances of insufficient color contrast, and those are reported together.
[0:46] If we select that issue, for example, we'll see more information about it in the main panel on the right. The highlight option will show a visual indication of the corresponding issue directly in the web page. Since this issue occurs four times on this page, we can toggle in between instances of this issue.
[1:05] The inspect option will move you to the actual element causing the issue in the Elements tab of DevTools if you want to debug more there.
[1:13] Heading back over to the axe tab, we have an Issue Description, the Element location, the Element source, and some guidance on fixing the issue. For further detail, you can follow this more info outlink by the highlight and inspect options. This will take you to the reference page for this particular issue on the Deque University site.
[1:38] This is a great way to learn as you're auditing. It will tell you how to fix the problem and why it matters.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!