Accessibility is the practice of making your web content accessible to everyone, including people with disabilities. Accessibility is not only a legal requirement, but also a moral duty and a business opportunity. According to the World Health Organization, more than one billion people in the world have some form of disability, and they represent a huge potential market for your products and services.
However, accessibility can be challenging to implement and maintain, especially if you have a large and complex web application. Manual testing can be time-consuming, expensive, and prone to human error. That’s why you need to use accessibility linters to automate your accessibility workflow.
Table of Contents
What is linting?
The term “linting” refers to the automated process of scanning your code for syntax and coding problems. This is accomplished with the help of a lint tool (or linter). Simple static code checkers are called lint tools.
What is a Code Linter?
A code linter is a tool that analyzes your source code and detects syntax errors, bugs, style issues, and potential problems. A code linter can help you write cleaner, more consistent, and more maintainable code. A code linter can also help you follow best practices and coding standards for your programming language or framework.
There are code linters for almost any programming language or framework, such as JavaScript, TypeScript, React, Angular, Vue, HTML, CSS, Markdown, and more. You can install code linters as plugins or extensions for your text editor or IDE (Integrated Development Environment) or as command-line tools that you can run on your local machine or in your continuous integration (CI) pipeline.
What is an accessibility linter?
An accessibility linter is a special type of code linter that focuses on finding accessibility issues in your web content. An accessibility linter can help you avoid common accessibility defects, such as missing alt text for images, improper use of headings and landmarks, insufficient color contrast, keyboard traps, and more.
An accessibility linter can also help you comply with the Web Content Accessibility Guidelines (WCAG), which are the internationally recognized standards for web accessibility. WCAG defines four principles of accessibility: perceivable, operable, understandable, and robust. Each principle has a number of success criteria that specify how to make your web content accessible to different types of users and assistive technologies.
However, not all WCAG success criteria can be tested automatically by an accessibility linter. Some criteria require human judgment or user feedback to be evaluated. For example, an accessibility linter can check if your images have alt text, but it cannot check if the alt text is meaningful and accurate.
Therefore, you still need to perform manual testing and user testing to ensure the quality and usability of your web content.
How to use the accessibility linter?
Here are some examples of free accessibility linters that you can use to automate your accessibility workflow:
AccessLint
A GitHub app that finds accessibility issues in your pull requests. It uses the axe-core rules engine to provide timely and targeted feedback before your code goes live.
axe Accessibility Linter for Visual Studio
An extension for Visual Studio Code that checks HTML, Angular, React, Markdown, and Vue files for accessibility issues. It also provides quick fixes and documentation links for each issue.
ASLint
A web-based tool that verifies the accessibility of your web content in real-time. It supports single-page applications (SPAs) and does not send your data externally. It also provides code snippets to add to your build pipeline or developer console.
A11yAutomation
A website that tracks potential accessibility violations and automated linters and tests is currently available. It helps you educate yourself about the ways your apps could fail the WCAG criteria and see what automation is available for your linting and testing workflows.
To use an accessibility linter effectively, you should follow these steps:
- Choose an accessibility linter that suits your needs and preferences. Consider factors such as compatibility with your language or framework, ease of installation and configuration, accuracy and reliability of results, documentation and support availability, etc.
- Install and configure the accessibility linter according to its instructions. Make sure it works properly on your local machine or in your CI pipeline.
- Run the accessibility linter on your source code regularly or automatically. Review the results and fix any issues that are reported by the linter.
Wrapping Up
Always remember to supplement the automated testing with manual testing and user testing. Use other tools, such as screen readers, keyboard navigation, color contrast analyzers, etc., to check how your web content works for different types of users and assistive technologies.
An accessible approach to designing a site is beneficial for all users, regardless of the technologies being used to interact with it. At AEL Data, we have a team of specialists who carefully audit each web page to identify issues and remediate them. Contact us if you need help at info@aeldata.com.
