Imagine yourself working on a project that is already in progress and you need to fix accessibility issues. Your team is faced with a gigantic board with more than a thousand tickets to solve. It's the end of the quarter and everyone wants to meet their goals and reach expected outcomes.
Upon assessing the situation, you can't help but wonder: "Are there any tools that will help me get through this overwhelming amount of work? Could I somehow avoid this in the future and prevent these problems from appearing?"
I can relate to this situation as it happened to me and I wished those questions had a quick answer so I could solve a huge amount of issues faster and more efficiently.
In this article, I will introduce you to various accessibility tools for developers that can be utilized in your project in different ways. Some of these tools can help you prevent new accessibility tickets from piling up, while others can assist you in identifying and suggesting solutions for existing issues.
1. Linter plugin
Many developers already know and use ESLint in some capacity, a widely-used static code analysis tool for JavaScript to identify and resolve common errors, enforce coding conventions, and maintain code quality. It can be further enhanced with specialized plugins that extend its capabilities. One such plugin is eslint-plugin-jsx-a11y which helps identify accessibility issues in code that uses JSX syntax.
The eslint-plugin-jsx-a11y plugin provides feedback on common accessibility issues such as missing alt text on images, incorrect usage of WAI-ARIA attributes, and other issues that can impact the accessibility of a website. As a result, it becomes an invaluable accessibility tool. Using it, developers can ensure accessibility from the beginning of the development process, facilitating the maintenance of accessibility throughout the development lifecycle. It also helps improve the overall quality of your code by identifying and fixing accessibility issues early on, avoiding technical debt, and ensuring that their code is maintainable over time.
In larger development teams or those working on complex applications, eslint-plugin-jsx-a11y can help ensure that everyone follows best practices for accessibility. If a project is already in progress with a significant number of problems, specific rules that cover already solved issues can be enabled, preventing warnings from the plugin all over the project and avoiding developers from ignoring the linter altogether.
Overall, eslint-plugin-jsx-a11y is a valuable tool for any web developer. Consider following a guide like React’s Accessibility Code Linter by Scott Vinkle to add this tool to your project. By incorporating it into your development process, you can improve the accessibility and quality of your code, while also ensuring that all users can access and use your website or application.
2. Axe for unit tests
Writing your unit tests is the best way to find bugs and vulnerabilities in your code, Axe is a free open-source web accessibility testing tool developed by Deque Systems, it helps test for accessibility issues on websites and provides detailed reports on any issues found. The versatile Axe API facilitates seamless integration with other testing and development tools, amplifying its utility across various contexts.
Axe-Jest is a Jest-based testing library that harnesses the power of the Axe API to conduct comprehensive accessibility testing in React applications. It offers a collection of custom Jest matchers specifically designed to evaluate common accessibility issues. Additionally, Axe-Jest boasts advanced testing features, including snapshot testing, which contributes to a comprehensive accessibility testing suite.
A few examples of custom matchers provided by Axe-Jest are:
- toHaveNoViolations: Checks that there are no accessibility violations on the page.
- toHaveNoViolationsForRtl: Checks that there are no accessibility violations on the page when rendered in a right-to-left language.
- toHaveNoViolationsForScreenReaders: Checks that there are no accessibility violations when the page is read by a screen reader.
- toHaveNoViolationsForColorContrast: Checks that there are no accessibility violations related to color contrast.
By configuring Axe-Jest effectively, you can incorporate accessibility testing into your development lifecycle through continuous integration steps, such as setting up a GitHub Action. This integration allows you to leverage the power of accessibility tools and prioritize accessibility testing within your workflow. However, it's crucial to recognize that relying solely on these tools does not ensure comprehensive accessibility. To achieve true accessibility, it is imperative to supplement automated testing with manual testing, utilizing assistive technologies, and actively involving individuals with disabilities in user research.
3. Axe developer tools
In addition to the API and the Jest library, Axe also has a DevTools extension for Google Chrome. The extension provides real-time feedback on accessibility issues as developers navigate their websites. It also offers guidance on how to fix these issues, making it a great tool for developers who want to ensure that their websites are accessible from the very beginning of the development process.
Axe DevTools offers a wide range of features that establish its significance as an invaluable tool for web developers focusing on accessibility. This tool efficiently provides comprehensive and actionable feedback on accessibility issues, enabling developers to understand and resolve them with ease. By using Axe DevTools, developers can swiftly identify and address challenges that may be difficult to detect through manual testing or static analysis tools like linters. Moreover, the extension's free version includes an automated scanning capability that saves time and serves as an ideal resource for individuals new to the realm of accessibility, facilitating rapid learning and skill development.
4. Lighthouse (Bonus!)
Lighthouse, an indispensable web development tool seamlessly integrated into the DevTools panel of the Google Chrome browser, offers developers a comprehensive solution for auditing the performance, accessibility, and adherence to best practices of their websites. With a specific focus on accessibility, Lighthouse conducts meticulous assessments and delivers an elaborate report highlighting any identified accessibility issues. This report covers a wide range of concerns, encompassing aspects such as color contrast problems, keyboard accessibility, and the implementation of semantic HTML. Behind the scenes, Lighthouse leverages the powerful Axe accessibility engine to ensure thorough evaluations.
Using the Lighthouse accessibility tool for audits, you can ensure your website meets accessibility standards. These audits can be included as part of a continuous integration pipeline. You can create a GitHub Action, like the one described in Automating the accessibility tests of your source code with GitHub Actions by Adrián Bolonio or follow An Introduction To Running Lighthouse Programmatically by Katy Bowman to get a more specific setup.
Conclusion
While automated accessibility tools can be incredibly helpful in identifying common issues, they are not foolproof. To truly ensure that your website is accessible to all users, manual testing is necessary. The best way to do manual testing is by having individuals with disabilities test your website and provide feedback on any issues they encounter. This feedback can then be used to fix the issues and improve the accessibility of your website.
In addition to manual testing, it is also important to consider the unique needs of your users when designing and developing your website. This may involve conducting user research to better understand the needs of your audience and incorporating accessibility features into your website from the beginning of the development process.
Overall, accessibility tools can be incredibly helpful in identifying and fixing accessibility issues on your website. However, they should be used in conjunction with manual testing and a comprehensive approach to accessibility to ensure that your website is truly accessible to all users. By prioritizing accessibility in your web development process, you can create a website that is inclusive and accessible to everyone.
