label on button elms should have an "unsupported" message

[PICARDBRB]

Should the button-name rule include the label/for markup pattern for pass criteria? <label for="labelfor">Name</label> <button id="labelfor"></button>

Expectation: No violation reported

Actual: reports violation "Buttons must have discernible text"

Motivation:

• Use of label/for on button element is valid html markup pattern that is not recognized.
• Provide accurate reporting of violations

[straker]

Thanks for the suggestion. We did some testing of this pattern awhile back and concluded that JAWS and Dragon Naturally Speaking do not support the pattern very well. Because of that, we decided not to support it.

If JAWS and Dragon support has changed in the last year we'd be happy to look at this again.

[WilcoFiers]

It might be good to have an explicit message that reports this as "not widely supported".

[PICARDBRB]

Can you look at this again? I did some testing with JAWS 2020, EDGE and Chrome, also Narrator with Edge.

**In all cases the following pattern is recognized and identifies button name: <label for="labelfor">Name</label> <button id="labelfor"></button>**

I also tested combination with buttons coded at: https://chalk-agenda.glitch.me/

• JAWS2020/Chrome: could not recognize name for button 7 and 17.
• JAWS2020/Edge: recognized name for button in all cases. did not recognize 4 and 14 role="switch"

Can you confirm dragon will not recognize the pattern: <label for="labelfor">Name</label> <button id="labelfor"></button>** which is also "My label 1" in the aforementioned link.

[straker]

Alright. I redid the testing. JAWS2020/IE11 still does not support the pattern (we still have to support IE11) and Dragon Naturally Speaking also still does not support the pattern. This means that anyone using Dragon cannot activate any of the buttons by their associated name.

As the results have not changed we still cannot support this pattern. I agree @WilcoFiers we should have a message stating lack of support.

[WilcoFiers]

I think the way to do this is to create a new evaluate method for button-has-visible-text, which allows implicit and explicit labels, and then add a new "none" check to button-name that explicitly calls out buttons only labelled through an implicit or explicit label.

[ZoeBijl]

Dragon Naturally Speaking

Do they not support it at all/in any browser?

[WilcoFiers]

A year ago, nope. If you have more recent data that suggests otherwise, that would be interesting news.

[kangax]

Somewhat related issue: we came across an instance of a button that's not being reported as not having text because it has markup but doesn't have any text (i.e. button.innerText == '' and button.textContent is just a series of " " and \n — \n\n \n\n \n \n\n \n):

<button>
  <span class="button__text">
    <li-icon aria-hidden="true" type="like-icon" size="small">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" data-supported-dps="16x16" fill="currentColor" width="16" height="16" focusable="false">
        <path d="..."></path>
      </svg>
    </li-icon>
  </span>
</button>

Would this fall under the same suggestion to create button-has-visible-text rule that would catch cases like this? Or would it make sense to expand the rule to account for actual text inside?

[straker]

@kangax I ran axe using your example but it's returning a violation for the button=name rule. I would think a button with an svg and no text should give a violation.

[WilcoFiers]

I'm going to close this, as we don't need two issues on the same topic: #3696