Set up ESLint to Audit Accessibility Issues in React
Our first layer of defense when building accessible React applications is to add some auditing tools to our development workflow. This should include adding static analysis checking for common accessibility standards and best practices. We can get this with the latest eslint plugin: "eslint-plugin-jsx-a11y". If you are already linting your projects adding this plugin should fit very smoothly into your workflow.
Resources
Instructor: [00:02] If you have not yet installed ESLint, then you will need to do that first, and then include the plugin. It's eslint-plugin-jsx-a11y. I am going to save it to our development dependencies.
[00:23] Now that that's installed, we need to configure it. You want to go to your ESLint, config. Mine is in eslintrc.json file. We will add a section for plugins. Again, it is jsx-a11y.
[00:44] Now if we want to configure the rules, we can do that here. You'll just specify whatever rule it is you want to configure. For instance, if I wanted to set alt-text to warn, I could do that here.
[00:59] If, instead, you want to extend the recommended or strict set of rules, we can do that as well. We would get rid of our specific rule definitions and add to the extends section, plugin jsx-a11y, and we'd either do strict or recommended for recommended mode.
[01:23] Let's go ahead and get ready to run it. If you have not done so previously, we can create a script for the linter. We would add to our script section in our package.json file. I am going to call this lint. We run it with the eslint command, and you specify the directory that you want to lint. For my project, it's called source.
[01:51] Another really helpful thing we could do is if every time we run test we want to run the linter first, we can add a pretest script that will run our linter.
[02:11] Let's go ahead and try this out. I've got a line of code that should trigger the linter and give us the error. Right here, we have img and it is missing an alt attribute. You'll also notice I've got some squiggly lines here.
[02:27] Some IDEs will integrate with your ESLint config and will actually visually show you when there is a finding. We can already see if we hover over that that it knows I am missing my alt attribute.
[02:40] Anyway, if you are not using an IDE that integrates with ESLint, you can continue to run it from the command line. No problem.
[02:47] This should give me an error. Let's go ahead and run it, and see that that happens. I am going to run the test script, just to show it will run my linter before it runs tests. I don't have any test. We're just going to see that the linter will show us the error. There it is.
[03:06] Here is my error, "img elements must have an alt prop." That's what we're expecting. If I go ahead and fix that real quick, and let's run it again. This time I am just going to run the lint script directly.
[03:29] Let's see that my finding was fixed, and it was. Here we go. Because the command line isn't showing any more output, that means there were no more errors found.