A linter is a tool that statically analyzes source code to flag programming errors, bugs, stylistic errors. Linting source code has become the norm for development teams wanting to ensure their code is meeting the teams standards and quality.
Linting is not just for programming languages like JavaScript. Linters can be used to analyze your HTML for improper use of attributes, broken tags, improper structure and ACCESSIBILITY!
Yep! You heard that correctly, you can catch accessibility issues in your HTML markup with linting.
Benefits of Accessible Linting
Accessibility linting has many benefits that can greatly improve your development team, including:
- Catching issues as you build HTML content
- Building accessibility knowledge for your developers
- Allows your team to build an accessible gate on commit
- Customizable to the framework you are developing in
With all the accessibility benefits, the biggest one is the simplicity of use. If you are a team that cannot slow down and are struggling to get accessibility into the day to day development, linting is the best place to start!
Picking Your Linter
There are multiple different linters that are out there for your development team to use. Picking the right one is key to getting the most effective one for your project.
ESLint Plugins
ESLint is one of the most popular linters for web content. The great news with ESLint is the flexibility of different plugins that exist for it. ESLint has many different accessibility plugins that work with your development teams specific framework.
- Vue Accessibility Plugin
- JSX Accessibility Plugin
- Angular Accessibility Plugin
- React Native Accessibility Plugin
Accessibility Specific Linters
If your project is not setup for ESLint or you are wanting to use an accessibility specific linter in tandem with another linter, then you may want to try the following:
-
Axe-Linter
- Axe-Linter is really the only accessibility specific linter out there that isn't tied to ESLint. It offers an out-of-the-box integration with multiple different frameworks, and uses a repurposed axe-core ruleset to check for around 30 rules.
Other Web Linters
There are also other web based linters that run accessibility checks inside them by default, while checking for other HTML best practices.
-
Web Hint
- Web Hint runs the axe-core rule set and checks for about 20 accessibility issues. Very quick and easy to setup and use.
-
HTML-Validate
- HTML Validate contains a few accessibility checks that will catch the very basic of issues.
Accessibility Rules In Linting
Now that we have covered the different types of linters that include accessibility checks, the next question normally asked is "What percentage of issues does this catch?" or "How many rules are there?".
The truth is linting over average catches only about 20-25% of accessibility issues and the average linter has around 15-20 checks for accessibility. This may seem low, however remember this is catching the most basic issues as your team develops.
Even those basic issues have major impacts that can be extremely detrimental to users using your site. Here is some examples of the issues linting catches that have a major impact:
- Images missing alt attribute
- Inputs missing an accessible label
- Actionable items missing accessible text
- Improper use of tabindex (Positive Integer)
- Improper ARIA usage
In Summary
If you are on a development team that is struggling to get on board with accessibility, then start as simple as it comes with linting. There is no excuses for not using it and enforcing it as part of your day to day development.
It may seem basic and it may seem like you are not fixing too much. However, linting is a first step in creating developers that are accessibility aware. It opens doors to making accessibility easy and effective while also getting teams to buy into to more of it in the future!
Top comments (0)