Accessibility Issue with md-list-items

[manish2535]

Actual Behavior:

• What is the issue? * md-list-item with ng-click on them gets rendered as buttons. These buttons do not actually have any text inside. According to https://www.w3.org/TR/WCAG20-TECHS/H91 a button element should have a name available. For a button a "name" can mean either the text inside or the title attribute.
• What is the expected behavior? The button element should have a title just like the aria-label attribute with the same content as in the aria-label if there is no text inside the button element.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://material.angularjs.org/latest/demo/list
• Details: the first md-list with ng-click on the md-list-item

Angular Versions: *

• Angular Version: 1.1.1
• Angular Material Version: 1.5.5

Additional Information:

• Browser Type: * Chrome
• Browser Version: *
• OS: *
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[devversion]

Thanks for the issue. I will come back to that issue after #9194 :)

[marcysutton]

Those buttons already have aria-label on them, which does a good job of exposing an accessible name–just as good, if not better, than title, given the accessible name calculation algorithm and tendency for title to be left out of speakable text depending on screen reader settings (it's more like aria-describedby than aria-label).

It's debatable whether title is necessary here. In some AT's it becomes redundant information that diminishes the user experience, and it's only visible to mouse users.

[marcysutton]

That said, it does behave very strangely in Voiceover and Safari–the individual buttons cannot be focused and the wrapper gets focus, instead. No idea what's going on there. It works fine in NVDA + Firefox and IE + JAWS.

[manish2535]

I agree aria-labels are much better than titles but for those of us who need to validate the site against the w3c checklist / validation rules (https://www.w3.org/TR/WCAG20-TECHS/H91), its a problem. Not sure whats the right move here. If adding title does not hurt accessibility then I vote for adding it to make the button w3c compliant. Thanks.

[devversion]

@manish2535 The problem with adding the title attribute is that the md-list-item then shows the aria-label on hover and this feels kind of wrong for me.

[marcysutton]

Are you talking about WCAG Success Criteria 4.1.2, where name, state and role can be programmatically determined? The first technique I see listed uses aria-label, which is a sufficient technique for exposing an accessible name. As I mentioned before, title is lower in preference in the name calculation algorithm. Please provide more info about the specific Success criteria language you are referring to so we can close this issue. https://www.w3.org/WAI/WCAG20/quickref/20160105/#ensure-compat-rsv
https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/ensure-compat-rsv.html

[manish2535]

I think articles you posted covers the issues I had nicely. So I am corrected and this task can be closed. Thanks.