Skip to main content

Automated code quality tools

Last updated:
1/18/2024

Automated code quality tools are not a replacement for human code review or manual testing, but they are a great supplement!

Note: Only 25% to 35% of possible WCAG conformance failures can be detected by automated tooling, which means the lack of detectable errors does not guarantee that a site is accessible or compliant.

Plugins

Code formatters

Linters

Linters are static code analysis tools that provide real-time feedback, automate code quality control, reduce the amount of human code review needed, allow code reviewers to focus on providing higher-level feedback, help avoid errors, and enforce best practices and coding standards.

We have custom ESLint and Stylelint configs that align with our front-end code standards available on npm. Learn more about installing automated code quality tools and shared configs.

  • Stylelint (recommended) is a linter for a variety of CSS syntaxes, including Sass.
  • ESLint (recommended) is a linter for JavaScript and JSX.
  • eslint-plugin-jsx-ally (recommended) audits for accessibility on JSX elements. It is designed to be used in combination with axe-core/react.
  • SonarQube is an automatic code review tool to detect bugs, vulnerabilities, and code smells in your code.
  • Deque's mission, vision, and passion is "digital equality." They offer several tools, trainings, and services to find and fix accessibility problems.
    • axe for Web is an open source accessibility rules library for automated testing. It can be customized to include custom rules and to integrate with all modern browsers and testing frameworks.
    • WorldSpace Attest incorporates automated accessibility testing into the development and implementation phase of web and native mobile development processes.
    • WorldSpace Assure is step-by-step manual accessibility testing and reporting tool that enables functional testers with minimal accessibility knowledge to create precise, comprehensive, and consistent accessibility issue reports for developers.
    • WorldSpace Comply helps ensure large websites become and remain accessible. It's used to dynamically scan, monitor, and report on the accessibility status of a site across business and development teams.
  • Pa11y runs automated accessibility tests.
    • Note: pa11y is not designed to be a complete replacement for regular accessibility testing. Think of it as being complementary to your existing workflow (which should include testing with actual users).
  • ngA11y is an Angular accessibility module.

IDE extensions

IDE extensions enhance the experience of working with an IDE and increase developer productivity.

  • vscode-stylelint (recommended) is a Stylelint extension available for VS Code.
  • SonarLint is an IDE extension that detects issues in HTML, JavaScript, TypeScript, and other languages. It’s available for VS Code, Visual Studio, Eclipse, and IntelliJ IDEA.

Developer tools

Developer tools are built directly into browsers.

  • Lighthouse (recommended) audits for accessibility, SEO, best practices, performance, and PWA across devices. It’s available in Chrome, from the command line, or as a Node module.

Browser extensions

Browser extensions either extend the functionality of the browser itself or integrate an existing service with the browser.

  • HeadingsMap (recommended) is a free browser extension that reveals the heading structure of a page for automated accessibility and SEO testing. It's available for Chrome, Firefox, and Edge.
  • Siteimprove (recommended) offers a free browser extension for automated accessibility, SEO, and quality assurance testing. It’s available for Chrome and Firefox.
  • axe is a free browser extension for automated accessibility testing. It’s available for Chrome, Firefox, and Edge.
  • WAVE is a free browser extension for automated accessibility testing. It’s available for Chrome and Firefox.
  • Accessibility Insights for web is a free browser extension that reveals the tab order of a page. It also includes tools to verify WCAG compliance through automated checks and manual tests. It’s available for Chrome and Edge.
  • Stark is a free browser extension that validates color contrast and simulates 8 different types of color blindness and as well as blurred vision. It’s available for Chrome.
  • ANDI is a free browser favelet for automated accessibility testing. It's available for Chrome, Firefox, Edge, Safari, and Internet Explorer.