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.


https://app.egghead.io/api/v1/lessons/aria-test-web-accessibility-using-the-axe-browser-extension/subtitles

Test Web Accessibility Using the Axe Browser Extension

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.

Test Web Accessibility Using the Axe Browser Extension

Share this video with your friends