Use the axe Browser Extension to Audit a Web Page for Accessibility Issues
The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects. This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool. Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect. This can be a great resource for learning more about how to write accessible code.
Resources
Instructor: [00:00] In order to install the aXe browser extension, you'll need to either look in the Chrome Web Store for Chrome, or in the browser add-ons for Firefox, depending on which browser you wish to use. You just install the extension in the browser of your choice.
[00:26] Now that I've installed the extension in Chrome, let's go ahead and use it. Here, I have a sample web application with some accessibility issues baked in. If I open Chrome DevTools, I now have a tab for aXe. If I select that and click the Analyze button, it will list whatever accessibility issues it's found for the current page.
[00:53] If you select an issue, you can choose to highlight each of the elements that have been found with that issue. Within the issue description, you can learn more about what the issue is. It shows you the source of the issue for the selected element. It lists the severity level. Here's a link to learn more about this issue.
[01:15] Here once again, we've got the severity level. We've got the standard that has been violated for WCAG. We have a bunch of information on how to fix the problem and why it matters, and then finally, links to more resources about this issue.
[01:36] Using aXe is a great way to learn more about how to solve a plethora of accessibility issues with your website.
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!