Button element does not accept aria-label as a valid name for accessibility

[mattdell]

This markup

<button name="next" aria-label="my icon button" type="button">
  <span class="dd-icon glyph glyphicon-heart" aria-hidden="true"></span>
</button>

Throws this error

This button element does not have a name available to an accessibility API. Valid names are: title attribute, element content.

Principle: Robust
Techniques: H91

Looking at the rules for H91 button I see very clearly

Name: text inside element or 'title' attribute

For which my code has neither.

However, aria-label is a valid name available to an accessibility API. In fact, by most screen readers it is preferred: http://www.deque.com/blog/text-links-practices-screen-readers/

Both aria-label and the title are listed in the text alternative computation algorithm with the title having the lowest preference

Has this been given consideration?

[luketw]

Hi Matt,

Thanks for your suggestion. I'll probably have to look into this in conjunction with #156 #157 #158 #159, and I've included sort-of a note-to-self to review the ARIA docs again at #162.

From my reading of things, especially HTML-AAPI, I agree with you - the above WG note states the order should be based on "aria-labelledby", followed by "aria-label", followed by the relevant HTML attributes. This is also in line with the note in WCAG2-TECHS#ARIA6 which warns that "aria-label" will override the HTML attributes.

[Heydon]

@luketw @mattdell Hi! Yes, aria-labelledby would take precedence over aria-label, which would take precedence over other naming techniques. Both aria-labelledby and aria-label are valid naming/labeling methods and well supported across UAs / ATs. There should be no error here.

[KittyGiraudel]

Hello,

I still have the problem running pa11y-ci@1.1.1, which runs pa11y@4.7.0, which bundles HTML_CodeSniffer@2.0.7.

 • This button element does not have a name available to an accessibility API. Valid
   names are: title attribute, element content.

   (#main > div > header > div > div:nth-child(1) > div > div:nth-child(2) > button)

   <button class="w aw y ax ay az ba bb bc bd be bf bg bh au bi bj at qa-backButton"
   type="button" disabled="" aria-label="Go back" data-reactid="16"><!-- react-empty: 17
   --><svg cl...</button>

It seems like HTML_CodeSniffer@2.0.7 does not include the fix. Correct?

[ironikart]

It seems like HTML_CodeSniffer@2.0.7 does not include the fix. Correct?

@hugogiraudel That is correct, the change is on the master branch which hasn't been tagged with a release yet. You could build from master if you were keen on getting the fix asap.

[XhmikosR]

Well, this bug affects every project that depends on this library, which is a lot. So a fix should be published from your side as soon as possible.

[KittyGiraudel]

Thanks for the quick reply! However —as @XhmikosR said— given it’s clearly a (small) bug in HTML_CodeSniffer, and given you also found, reviewed and merged a clean fix for it, isn’t there a way we could publish it as 2.0.8?

[ironikart]

@XhmikosR @hugogiraudel I've released the fix in 2.1.0

[XhmikosR]

Thanks!

[KittyGiraudel]

Very cool, thank you!

[KittyGiraudel]

Same goes for a tags: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent. Is it expected?

[ironikart]

@hugogiraudel Looking at the code I think you are correct, there should be some label detection here. Re-opening and will look at adding it.

[KittyGiraudel]

@ironikart Thanks! :)

[72gm]

I still seem to be getting this error? This markup looks correct to me?

[ironikart]

It looks correct to me but the code that was changed most recently only affects buttons and hyperlinks. I will re-open this and investigate for other element types.

[chavab1]

Wondering if the change had been implemented yet. I'm getting the same error. I have a div with a role=button attribute. I've included a title and an aria-label but it still triggers the same error documented on this thread.

[ironikart]

@chavab1 This issue snuck under the radar for a bit, apologies. I've pushed up a fix for this now but won't be available in the bookmarklet until our next release.

[chavab1]

OK, sounds good. I'll be on the lookout for the next release.
Thanx

[72gm]

Hi, When are you likely to push a new release?
Thanks

[barrypoore]

I'm getting this:

This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.

<button class="mini-cart_button" name="cart" dropdown-toggle"="" id="mini-cart" data-toggle="dropdown" data-count="0" aria-expanded="false" value="cart"> <span class="p...

Does this mean my code is wrong or is it an error of the code sniffer widget?

[ironikart]

The sniffer was unable to find some text to describe the button to a screen reader. The suggestions are to add attributes like title, aria-label or aria-labelledby (if there is another element that has descriptive text for this button), or to have content in the button itself. If you think there is something wrong with the detection and it has descriptive text just paste the the full html snippet of this button and I can confirm for you.