Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Check for Accessibility Issues in JSX with the jsx-a11y ESLint Plugin

    Andy Van SlaarsAndy Van Slaars
    ariaARIA

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.