Check for Accessibility Issues in JSX with the jsx-a11y ESLint Plugin
Because we'll be controlling our markup via JSX, we can use ESLint to check our markup for potential accessibility issues based on static analysis of the code. In this lesson, we'll install, configure and run the jsx-a11y ESLint plugin.
Instructor: [00:00] ESLint is great at catching potential bugs in our code, but we can also use it to detect accessibility issues. Let's npm i as a dev dependency ESLint plugin JSX A11Y. This is the accessibility plugin that's going to check our JSX for potential accessibility issues.
[00:25] With that installed, let's open us our ESLint config. I'm going to find the plugins entry, and I'm going to add another plugin, JSX accessibility. I'll save that, and I'm also going to come up to our extend section.
[00:43] Let's add a third entry here. We're also going to extend the plugin JSX A11Y/recommended. I'll save that, and with that, let's go into our terminal. I'm going to npm run lint. Everything's going to pass. Let's come into our app.js file, and in our render output, after this hello world message, I'm going to add an image tag with a source.
[01:17] We'll just make that up. It doesn't really matter, because we're not going to run this code. We just want the linter to catch an error for us. I'm going to save that, and then back in the terminal, I'll npm run lint one more time.
[01:33] This time, we're going to get an error. Let's expand that. We'll see that our error is coming from our JSX accessibility plugin. It's letting us know that image elements must have an alt prop, either with meaningful text or empty string for decorative images.
[01:49] That's easy enough guidance. We should be able to fix this. I'm going to come in here, and I'll give it some alternate text. I'm going to call it logo image, and we'll save that. Then we'll go back into our terminal and run our linter again.
[02:06] We get a new error. It'll tell us that our alt attribute is redundant. Screen readers already announce image tags as an image, so you don't need to use the words "image." I can come back here, and I can take image out of there.
[02:23] We'll say company logo, go back into the terminal, run our linter again, and now, it's happy. I can clear that out. I know my JSX plugin is working. I can come back into my code, delete that image, and everything is good.
I had to change my package.json lint script to this to get it to work:
"lint": "eslint './' './src/*'"
I had to change my package.json lint script to this to get it to work:
"lint": "eslint './' './src/*'"
Ended up changing it to this: "lint": "eslint --ext .jsx --ext .js ./ ./src"
Doesn't work for me. jsx-a11y no affect gives me pass even with messing up the image tag.