Accessibility Linters & DevTools
There are many options for testing tools these days! My workflow includes Chrome, Firefox, and Safari DevTools, both built-in and added-on. There are also linters for VS Code and other text editors/IDEs that can come in handy day-to-day, among other tools.
Built-in Browser DevTools
Chrome (opens in a new tab) has a robust set of developer tools for accessibility testing that have become my favorites: the Elements inspector, Styles pane, Accessibilty Information Tab, Responsive Device Toolbar, Lighthouse, and Console, just to name a few.
Firefox (opens in a new tab) provides some accessibility tooling along with general web dev tools, including a great CSS flexbox and grid layout visualizer. The Firefox color picker (opens in a new tab) has a contrast ratio inspector that’s worth checking out, too.
Safari (opens in a new tab) has its own set of tools, including an Accessibility inspector, Audit feature, and Responsive Design Mode. When you tether an iOS device to desktop Safari, you can also debug mobile Safari webpages.
Chrome Lighthouse
Lighthouse (opens in a new tab) is a web app auditing tool built-into Chrome that includes categories on Performance, Accessibility, Best Practices, SEO, and Progressive Web Apps. The accessibility section uses the axe-core JavaScript API and other rules to return
Browser Extensions
There are so many other browser extensions (also called add-ons)! Here is a small sampling of my favorites to get you started:
-
Axe by Deque Systems (opens in a new tab) in Chrome is my daily-driver accessibility testing tool. (I worked on Deque’s Axe product team a while back, and I still love their extensions.)
- You can check the rendered source of a page at runtime, and again with components opened or active to surface more issues.
- Observe the labels and tags for issues returned, including WCAG violations versus optional best practices.
- Debug issues by clicking through to source elements and highlighting nodes.
- The axe-core engine (opens in a new tab) powers other free and paid tools for the Software Development Lifecycle, so it can provide some nice consistency in larger organizations.
-
Accessibility Insights for Web (opens in a new tab) from Microsoft is another great tool!
- It uses the axe-core automation engine under the hood, along with its own manual evaluation tools.
- I like the Tab Stops tool for visualizing the keyboard tab order.
-
The Web Developer Toolbar (opens in a new tab) for Firefox and Chrome has been around forever.
- The Headings visualizer under Information > View Document Outline has been one of my favorites for years, as it shows the overall heading structure in a useful way. (I wish a similar Headings tool existed in browser DevTools!)
-
Headings Map (opens in a new tab) is a tool I just learned about and it seems awesome! I definitely think I’ll use this in my workflow.
ESLint and other text editor plugins
While browser extensions are essential to review and debug pieces of UIs, linters for your text editor can be useful as well.
- ESLint-Plugin-JSX-A11y (opens in a new tab) is a standard eslint plugin for React applications.
- Axe Linter (opens in a new tab) is another tooling suite from Deque. There are some really helpful looking tools here, including GitHub actions and other integrations.
You might need to tweak linter config settings to get output that works for your team. Keep in mind that markup in a text editor will only highlight part of the picture. CSS and JavaScript could impact the accessibility of a rendered component (why I do browser debugging)!