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 or Chrome

VoiceOver in Safari

JAWS in Chrome or Microsoft Edge (JAWS no longer targets Internet Explorer, which has been fully retired)

ChromeVox, now built into ChromeOS by default; the standalone Chrome extension version still exists but is less actively developed than it once was

Create React App (now deprecated) shipped with the 'eslint-plugin-jsx-a11y' plugin pre-configured, with a subset of rules activated. If your current toolchain (Vite, Next.js, or another setup) doesn't already include it, you can add it yourself. If you want to enable even more accessibility rules, you can create an .eslintrc file in the root of your project with this content:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
  "plugins": ["jsx-a11y"]
}

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 Developer Tools Interface (F12).