fix(aria-allowed-attr): pass aria-label on some HTML elements

[WilcoFiers]

Allow aria-label and aria-labelledby on the following elements, if those elements have no role.

• audio
• applet
• canvas
• dl
• embed
• iframe
• input
• label
• meter
• object
• svg
• video

Closes issue: #2933, #2926

I did a bunch of testing with JAWS, NVDA and VoiceOver to come to this list, here are my test results:
https://codepen.io/wilcofiers/pen/WNpwMNj?editors=1000

"label" is the only one that isn't supported that I added anyway, because if you do <label aria-label="foo" for="bar"></label>, that label will be used in the accessible name of whatever form control has id="bar". dl is on the list (unlike ul, and ol) because it doesn't have an implicit role.

[straker]

I don't think span should be allowed

[zelliott]

@straker Are you able to link to the specific section of the ARIA spec that disallows aria-label on span? I'm looking through https://www.w3.org/TR/html-aria/, but I can't find anything that disallows it. It appears as though span allows "Global aria-* attributes", of which aria-label is one (per https://www.w3.org/TR/wai-aria-1.2/#global_states). Of course that list has the carve-out "Except where prohibited" for aria-label, but I can't find anything that prohibits aria-label for span or more generally for role-less elements.

FWIW, I generally agree with disallowing aria-label on span, but I'm not sure if it's a strict ARIA conformance violation.

[straker]

So there is no spec documented reason for this (although it's coming). You can see where we got most of the concept in this pr #2764. As it stands though, it's also a mix of a best practice since no screen reader supports it (#2712 (comment)).

Edit: looks like it's been updated since I last looked. The generic role now prevents aria-label/ledby.

done

[andrewleith]

I'm seeing the same issue on an <i> element. Is this a bug as well or is it not allowed to put the an aria-label attribute on this tag?

Markup that is failing:

<i tabindex="0" class="remove icon" aria-label="clear field"></i>

Message from Axe:

Elements must only use allowed ARIA attributes

[straker]

@andrewleith <i> elements do not allow aria-label. Using <i> in this way is one of the common examples of why this rule was created since screen readers do not announce the aria-label on the element.

[andrewleith]

Interesting. Thanks for the info @straker :)
Are these rules written formally somewhere? It appears the markup I provided passes the NU validator but warns on the W3c one...

[straker]

I'm not sure what you mean by formally, but Leonie Watson wrote an excellent article on this behavior, which was the basis of this rule.

[melaniephilipp]

@straker @WilcoFiers Someone on the A11y Slack (external) channel today mentioned getting an error for aria-labelledby on a <video> element. Has this fix been pushed out to axe-core / axe browser extension yet?