Use react-axe to Audit Accessibility Issues at Runtime during Development

Continuing to add to our accessibility auditing toolset: react-axe goes hand in hand with eslint and specifically the eslint-plugin-jsx-a11y plugin. While eslint analyzes our static code, react-axe is able to audit the elements that are available in the DOM at runtime. As components get rendered into the DOM by React, react-axe is able to immediately check them for potential accessibility issues and will output any findings to the console. Adding this tool to our workflow gives us accessibility checking as we're developing so that we can eliminate a plethora of potential issues as early as possible.

Resources

• List of all rules supported by react-axe
• Documentation of the Configuration Object
• How Deque Labs makes decisions on axe rules