Free Accessibility Linters to Automate Accessibility Workflow

In this post we provided a roundup of accessibility linters available

What is a code linter?

A code linter is a tool, usually a plugin or extension installed in your text editor, which watches and reports bugs in your code in real-time. Linters are available for a wide variety of editors, supporting any programming language.

There are accessibility linters which will help developer ‘s write accessible & usable code, just use one of these linters & get started on creating accessible applications.

Please note that these accessibility linters help catch WCAG violations that can be automated, accessibility specialists are required to perform manual accessibility audit of the application once the code is deployed.

Free Accessibility Linters Roundup

• Automating the accessibility tests of your source code with GitHub Actions
  A comprehensive guide on how to use GitHub actions to build your own accessibility CI/CD pipeline.
  GitHub Actions allow you to automate, customize, and execute your software development workflows right in your repository with GitHub Actions. With GitHub Actions you could execute a series of statements and commands after a specific event has occurred, simply put, it’s your own pipeline CI / CD directly in your repository.
• AccessLint – Automated and continuous web accessibility testing
  AccessLint is a GitHub App that finds accessibility issues in your pull requests.
  How it works
  AccessLint brings automated web accessibility testing into your development workflow. When a pull request is opened, AccessLint reviews the changes and comments with any new accessibility issues, giving you quick, timely, and targeted feedback, before code goes live.
• ASLintAccessibility testing tool
  Verify accessibility of your content in real-time, including Single Page Applications.
  Review results and determine the impact on the business.
  Does not send content or data externally, so can be used for internal-only purposes.
  Tests can be run asynchronously (without blocking the UI) or synchronously.
  Provides code snippet to add to build pipeline (e.g. for automation tests) or developer console, or can run as a bookmarklet.
  Easy locating issues on the page from the results using element detector or
  XPath:
  ▪ Color contrast recommendations
  ▪ Provides checklist for things that can’t be tested automatically.
• axe Accessibility Linter for Visual Studio
  Accessibility linting for HTML, Angular, React, Markdown, and Vue
  • Checks React (.js .jsx .ts .tsx), Vue (.vue), Angular (.component.html), HTML (.html .htm), and Markdown (.md .markdown) files so you can avoid common accessibility defects. Inline Angular templates are not currently supported.
  • Consistent with the open-source axe-core rules engine to provide early warnings of real accessibility defects — zero false positives, so you don’t have to write a bunch of ignore flags.
  • No configuration required – zero learning curve, so you can be productive immediately.
  • Shareable project-specific configurations, so your team can select the accessibility standard and select individual rules.
• axe Linter for GitHub
  Automatically find and fix accessibility issues with axe Linter. Axe Linter analyzes the changed or added code of your GitHub pull requests, reports issues and intelligently requests changes for common issues- all before your pull request gets reviewed and the code gets merged. Developers can supplement existing accessibility testing efforts by using axe Linter to catch accessibility issues early and often, significantly reducing future testing efforts.
• a11y-logger.js
  a11y-logger.js runs assertions from the aXe-core accessibility library wherever you include the script once on page load, and again for each click, at idle time.
• eslint-plugin-react-native-a11y
  Eslint-plugin-react-native-a11y is a collection of React Native specific ESLint rules for identifying accessibility issues. Building upon the foundation set down by eslint-plugin-jsx-a11y, eslint-plugin-react-native-a11y detects a few of the most commonly made accessibility issues found in react native apps. These rules make it easier for your apps to be navigable by users with screen readers.
• eslint-plugin-vue-a11y
  Static AST checker for accessibility rules on elements in .vue.
• eslint-plugin-vuejs-accessibility
  An eslint plugin for checking accessibility rules from within .vue files.
• Linting Web Accessibility issues in your HTML using just CSS! by Wilson Mendes
  To make this a smooth process with fast feedback, I just created a small, but totally useful Gist that I called a11y-dev-mode.css! It has some CSS rules that applies some changes on elements without correct information such as missing attributes, having elements with empty content and assuming wrong Accessible Rich Internet Applications Suite — WAI-ARIA  roles.
  

  What “A11Y-Dev-Mode.css” file is checking?

  
  This gist is covering most of the common issues, such as:
  • HTML tag <html> without [lang] definition;
  • Ordered/Unordered ( <ol> and <ul> , respectively) HTML lists without a list inside ( <li> ) of them;
  • Images ( <img> ) without [alt] attribute;
  • Anchor tags ( <a> ) without correct [href] or even empty;
  • Label tags without [for] attribute;
  • Empty <button> tags;
  • Div tags using [role=”button”] . It affects some screen readers and browsers, changing the default behavior of div for people with disabilities;
• React’s Accessibility Code Linter
  When creating or maintaining an existing React app, do you wonder about how to make sure the code you write helps to ensure an accessible user interface? Can this even be done with React? Are there any tools to help automate this process? This may surprise you, but I’m happy to report that there is something available to help developers write more accessible code, and it comes pre-packaged with React; a utility called a “code linter