1. 33
    Check for Accessibility Issues in the Browser with react-axe
    4m 13s

Check for Accessibility Issues in the Browser with react-axe

Share this video with your friends

Send Tweet

The jsx-a11y lint plugin is a great first line of defense to prevent accessibility issues, but no tool can cover everything. React-axe gives us a runtime check on our rendered DOM, and by adding it to our boilerplate, we’ll ensure that all our future projects have accessibility covered from multiple angles. In this lesson, we’ll install react-axe and add it to our entry point for development builds only.

Alan Baird
Alan Baird
~ 5 years ago

I got another error when I loaded the Axe checker in dev mode. It complained about "Document must have one main landmark" and other such issues. To fix it just put a <main> tag around the content in App.js (I put mine directly underneath the top level <div>.