Search code examples
reactjsaccessibilitywai-aria

Is there an extension/eslint for ARIA attributes?

I'm trying to make my apps more accessible, and I was wondering if there's an extension or config in eslint that tells me where/what ARIA attributes I should use in my code. I tried a VSCODE extension called Web Accessibility, but I don't think it works with React.

Glad if anyone could help.

Solution

  • I was wondering if there's an extension or config in eslint that tells me where/what ARIA attributes I should use in my code.

    There isn't. WAI-ARIA is complicated and there isn't a plugin that can tell you when to use it, which one to use and which is correct. That's like asking if there is a plugin that tells you when to use HTML.

    Also, accessibility !== ARIA. You can have a perfectly accessible website and not having to write a single ARIA attribute. In fact, if you are not proficent in ARIA, you can make the website much worse, accessibility wise. Take it from someone who once audited a website where web dev department used aria-label for every single link.