Therefore, it may be more conservative at this stage in contrast to a runtime analysis. One of the linter’s goals is zero false positives. But it did detect the “Funky tab order” issue that we did not expect it to detect.Ī couple of thoughts come to mind. The linter only flagged 3 of our 11 computer-discoverable issues. The following WCAG tags are available for configuration in axe Accessibility Linter:Īccuracy of Feedback: Areas for Improvement (1/4) Accessibility Tool RubricĪccuracy of Feedback 1/4: This tool catches more computer-discoverable accessibility issues than it misses. It would definitely help a team that decides to take advantage of the linter’s configuration options by quickly seeing what tags are in play. For me, still in the early stages of my a11y experience, it would benefit me greatly to see the associated standard at a glance. For more seasoned accessibility folks this may only be a minor annoyance.
As it is now, I have to follow the link to identify the WCAG group. The one improvement I would like to see is to also list the WCAG group that the rule belongs to. The ‘Problems’ tab lists the issues with a clear description of the rule and a link to comprehensive documentation.
The marketplace plugin page lists all rules that it checks and links them to Deque University’s rules pages along with the WCAG identifier.Ī rule violation is clearly identified in the editor with a familiar squiggly line under the code in question. The linter checks against both WCAG guidelines and a set of common accessibility best practices. Evaluation criterion list which facets of the guidelines are met or missed in a manner that correctly interprets the intent of the original source. Reputable Sources 4/4: This tool directly references community accepted guidelines, like WCAG 2.1. Reputable Sources: Outstanding (4/4) Accessibility Tool Rubric Deque also maintains an issue reporting page and has a publicly available slack channel for even quicker feedback. Each is linked back to Deque’s site for reference. The rules are clearly listed on the plugin’s marketplace page. You can enable/disable specific rules or entire WCAG groups to fine-tune the needs of your project. The rules that the linter checks against can also be configured in a user-created axe-linter.yml file. The results are listed in the ‘Problems’ tab of the editor: Upon installation, the linter immediately begins analyzing your code.
There is a readily available outlet for feedback or questions. The documentation is complete and up to date. Input devices (buttons, CLI commands, etc) are easy to find and well named or described. Ease of Use: Outstanding (4/4) Accessibility Tool RubricĮase of Use 4/4: This tool is fantastically easy to use. The linter checks React, Vue, Angular (no inline templates), HTML, and Markdown files. There are no required configurations to start linting. A single click installs the universal plugin from the Visual Studio Marketplace or the Extensions tab in the editor. Installing the axe Accessibility Linter is straightforward for VS Code users. A step-by-step installation guide is available with the tool’s source. Installation is possible on multiple types of projects (React, Static, CMS, etc). Jump to the conclusion if you are in a hurry.Įase of Setup: Outstanding (4/4) Accessibility Tool RubricĮase of Setup 4/4: Installation took less than an hour.
Watch a walkthrough of the tool and a short review or keep scrolling to read the full review. This review will rate the tool based on the following areas: This review will focus solely on the linter’s performance but should be considered a tool within a larger, more comprehensive, accessibility analysis toolchain. Deque Systems suggests pairing this tool with their axe browser extension which we reviewed earlier in this series. In this article, I will review the axe Accessibility Linter VS Code plugin from Deque by using it on a testing site that has planned accessibility issues.Ī linter enables early and frequent feedback at the beginning of a developer’s workflow. Sparkbox’s goal is to research various accessibility tools and empower anyone to run accessibility audits. Each tool has its strengths and weaknesses in catching accessibility errors.
Visit the series page for other reviews and to find an introduction post that explains our methodology.Ī wide range of tools can help you find accessibility issues, from browser plugins and website scanners to Javascript libraries that analyze your codebase. Each tool is evaluated according to our accessibility tool rubric. We aim to help you know how each tool excels and which tool can meet your needs. Sparkbox has put together a research initiative to evaluate popular automated accessibility tools. About the Accessibility Tool Reviews Series