MENU

Development Tools

To check whether the entire website can be used with the keyboard alone, disconnect the mouse. Use 'Tab' and 'Shift+Tab' to browse, and 'Enter' to activate elements.

Also, use a screen reader to test the website:

NonVisual Desktop Access (NVDA) in Firefox

VoiceOver in Safari

JAWS in Internet Explorer

ChromeVox in Google Chrome

Create React App has the plugin 'eslint-plugin-jsx-a11y' with a subset of rules activated. If you want to enable even more accessibility rules, you can create an .eslintrc file in the root of your project with this content:

Several tools exist that can run accessibility audits on web pages in your browser:

Deque Systems offers aXe-core for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.

The Accessibility Engine or aXe, is an accessibility inspector browser extension built on aXe-core.

You can also use the react-axe module to report these accessibility findings directly to the console while developing and debugging.

The Web Accessibility Evaluation Tool (WebAIM WAVE) is another accessibility browser extension.

The Accessibility Tree is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed to assistive technology, such as screen readers.

Some browsers such as Chrome, Firefox, and Safari also provide an Accessibility Inspector on the Developers Tools Interface (F12).