search

EtchUK / Etch.OrchardCore.ThemeBoilerplate

Boilerplate theme that is our starting point for building OrchardCore themes.
MIT License
15 stars 1 forks source link

Lack of ARIA roles #147

Open JoeBerkley opened 4 years ago

JoeBerkley commented 4 years ago

I ran a website we had built with the theme boilerplate through Web Dev and I noticed we're losing a lot of accessability points due to us not having properly defined ARIA roles where possible.

The example they give would be something akin to this:

<a class="btn btn--secondary" role="button" href="#">Submit</a>

There is a long list of roles we can implement, but we should strive to get some of the big ones ticked off, like the button example above I think.

The full list of Roles is available here: https://www.w3.org/TR/wai-aria-1.1/#role_definitions

peterkeating commented 4 years ago

Interesting as @Newnab's HTML validator is telling him to remove some aria roles (https://github.com/EtchUK/Etch.OrchardCore.Widgets/pull/35)

peterkeating commented 4 years ago

@JoeBerkley I'd also say the example you've given should actually have it's element changed to button instead of an anchor element if it's to triggering something when pressed, likely via JavaScript.

<button type="button" class="btn btn--secondary">Submit</button>

This is something we have been doing with the v0.6.0 update where noticed.

Newnab commented 4 years ago

We should absolutely be using roles where an implicit role cannot be determined by a semantic element. My removals were only in places where the semantic element already implies the correct role, but it might be worth a review as Joe suggests on places we could add some.

Things like dialog, alert, tooltip, and search (on a whole form that includes search options) are common ones that don't have a 1:1 semantic element equivalent. "Complementary" might also be worth considering... Not sure how many of these would make our boilerplate though?