search

projectblacklight / blacklight

Blacklight provides a discovery interface for any Solr (http://lucene.apache.org/solr) index.
http://projectblacklight.org/
Other
757 stars 255 forks source link

aria-labelledby on a div without a role is not useful #3119

Closed jcoyne closed 5 months ago

jcoyne commented 5 months ago

I think we should revert https://github.com/projectblacklight/blacklight/commit/b787f3710f10ef1a7a2806653cbf3409dbb6d504

Using aria-labelledby in this way is no longer recommended by Bootstrap https://getbootstrap.com/docs/5.3/components/accordion/ (removed in https://github.com/twbs/bootstrap/pull/37766)

Siteimprove is flagging this for us:

Screenshot 2024-01-17 at 2 31 32 PM

aria-label does not work on <div> nor <span>.

A <div> and <span> are neither landmarks nor interactive content. An aria-label will not be read by a screen reader (and rightly so).

https://stackoverflow.com/a/42682268/162852

Another possibility is adding role="group"

dbranchini commented 5 months ago

I need to dig a bit more on this, because I use this site a lot for aria guidance - https://www.w3.org/WAI/WCAG21/Techniques/#aria, and I found this (with an alert that their example still needs additional testing) - https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ where they are using aria-labelledby in the exact same way as we are. Yet, I see how SiteImprove is picking this up as an error too.

jcoyne commented 5 months ago

@dbranchini it looks like the accordion example there uses role="region", which seems like a reasonable solution if you agree.

dbranchini commented 5 months ago

Yes, that sounds like a good solution.