New tests : ARIA design patterns

ffoodd / a11y.css

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.

https://ffoodd.github.io/a11y.css

MIT License

1.47k stars 91 forks source link

New tests : ARIA design patterns #259

Open ffoodd opened 7 years ago

ffoodd commented 7 years ago

Following WAI-ARIA Authoring Practices, we can create tons of selectors to test what's testable :)

eg:

[role="alertdialog"]:not([aria-label]):not([aria-labelledby]) {
}

but since it would be pretty heavy — and also kinda specialized — I think it should be a separate level file. Some new tests regarding ARIA would also move to this new level…

ffoodd commented 7 years ago

More examples from @Heydon's "Apps for all":

[role="status"]:not([aria-live="polite"])
[role="alert"]:not([aria-live="assertive"])
[aria-live="polite"]:not([role="status"])
[aria-live="assertive"]:not([role="alert"])
[role="tablist"] a:not([role="tab"]): not quite sure about this one…
[role="tabpanel"]:not([id])
[role="tab"]:not([aria-controls])

chris-morgan commented 6 years ago

I don’t see why you’d separate this from the rest—it’s a whole bunch of “if you’re doing fancy ARIA stuff, make sure you’re doing it properly” things; people that aren’t using ARIA won’t be affected. The negative impact of poorly-implemented ARIA stuff is often higher than no ARIA stuff, so I think it’s worthwhile foisting this on everyone.

ffoodd commented 6 years ago

Good point! And in fact we'll probably have errors, warnings and advices too, makes sense to stick to the current levels.

ffoodd commented 6 years ago

Another resource that could be checked: display-wai-aria.css by @masuP9 :)

ffoodd commented 6 years ago

And another one, with a dedicated required attributes column per pattern on whatsock.com.

ffoodd commented 6 years ago

Some from @felixzapata too: cssTest-a11y. Not only ARIA ones :)