search

jsx-eslint / eslint-plugin-jsx-a11y

Static AST checker for a11y rules on JSX elements.
MIT License
3.37k stars 636 forks source link

Find rules from aXe #29

Open lencioni opened 8 years ago

lencioni commented 8 years ago

The aXe browser extensions are used to tell you about accessibility problems on the pages you visit. I bet there are some rules in there that we can use as inspiration for this project.

It looks like they have built an engine that consumes JSON to do the rules. Here are the rules JSON files https://github.com/dequelabs/axe-core/tree/master/lib/rules

Here's their site that lists the rules they have: https://dequeuniversity.com/rules/axe/1.1/

lencioni commented 8 years ago

Here are a few that I found that I think might be worth considering:

These are probably not super useful, at least in the context of React, but they should be implementable

I think we already have this rule, but there might be some things to look at in here: https://dequeuniversity.com/rules/axe/1.1/aria-required-attr

lencioni commented 8 years ago

I think it might make sense to rename img-has-alt to has-alt, alt, alt-text, or something more general like that, and just add object, area, and input-image (need to special case this one in the code I think) to the list of things it checks for.

beefancohen commented 8 years ago

If we were to do that, then I think it should accept an option in the rules config to ignore certain html elements that we're checking for (although they shouldn't). Reason is that if we were to create a rule for each of these (such as img-has-alt, object-has-alt, etc.) the consumer has total control over configuration in terms of applying that rule or setting its warning level (0, 1, or 2). By grouping all of them together, we strip that control from user which IMO is a no-no.

In this case, it seems harmless to group all of those together - why wouldn't a user want to use alt on all of these elements? - but, I think there is value in being explicit in your .eslintrc to better understand the rule being applied and why that rule exists (re: documentation)

lencioni commented 8 years ago

What do you think about renaming img-has-alt to alt-text and having it accept two options: one would be a list of DOM elements that require alt text (defaulted to ['img', 'object', 'area', 'input-image']) and the other would be a list of components that require alt text (the current option, defaulted to [])?

I agree about the value of things in .eslintrc being explicit, but I think this strikes a nice balance.

beefancohen commented 8 years ago

Starting this today - just finished heading-has-content. Can be tracked in new-rules branch

beefancohen commented 7 years ago

Looks like that was an outdated ruleset for aXe but I think all still apply. They are on 2.1 (I found this by manipulating the URL until I saw a 404, so it may be wrong): aXe

Adding a few new to track here:

feel free to suggest different naming and/or other rules!