Re: "Possible misuse of aria-label" warning

"Miller, Brian (ITS)" <Brian.Miller@its.ny.gov>, 2019-06-20 17:31 +0000:
> Archived-At: <https://www.w3.org/mid/MN2PR09MB3582F2C27C922E45E2F82EBAB6E40@MN2PR09MB3582.namprd09.prod.outlook.com>
> 
> We're using figure elements (with role=group) to provide accessible
> content from infographics.
> 
> There are actually two sets of text for each infographic: a displayed
> caption, and fully descriptive text for the content in the infographic,
> that is not displayed but is available for screen readers).
> 
> It seemed prudent to apply different aria-labels to these two divs, but
> its getting a warning from the "nu" validator.
> 
> Here's the basic code:
> 
>   <figure role="group" aria-label="Tourism">
>   <img src="tourism.jpg"  alt=" Tourism Infographic" class="slide-image">
>     <figcaption>
>       <div class="hideme" aria-label="Tourism content"><p></p></div>
>       <div class="slide-text" aria-label="Tourism caption"><p>Tourism caption</p></div>
>       </figcaption>
>   </figure>
> 
> Is that really a misuse of aria-label? "aria-describedby" doesn't seem
> good, because in many cases the infographic content is best provided in
> tabular or list format.

Is there no appropriate role attribute you could use on those divs? If
those divs had an ARIA role, the checker wouldn’t emit the warning.

Anyway, for identifying which cases to make the checker warn about, I used
the following guidelines:

* https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby
* https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

From those, a couple of quotes:

> Don't use aria-label or aria-labelledby on a span or div unless its given
> a role. When aria-label or aria-labelledby are on interactive roles (such
> as a link or button) or an img role, they override the contents of the
> div or span. Other roles besides Landmarks (discussed above) are ignored.

> If you use aria-label, aria-labelledby, or aria-describedby with any
> other elements (like div, span, p, blockquote, or strong etc.), they
> generally won’t work across all browser/assistive technology
> combinations.

And see also https://github.com/w3c/html-aam/issues/160 for related discussion.

In particular, see https://github.com/w3c/html-aam/issues/160#issuecomment-499959873:

> Per the ARIA WG meeting yesterday, it seems consensus has moved to div,
> span and the new generic role should prohibit use of aria-label and
> labelledby. While it does work well in certain instances, it's erratic in
> others. And even in the instances where it does work correctly, there are
> better ways those could be marked up.

Given all the above, it seems the checker warning for the markup case you’ve
shown aligns with the existing best-practice guidance and with the proposed
changes to the ARIA spec (which I think will actually make the role-less
div as an error case rather than just a warning case).

  –Mike

-- 
Michael[tm] Smith https://people.w3.org/mike