Fluentui: Toggle A11y Pass

[TestAccessibilityGIT]

Tracking all of the issues brought up with the 11/16 accessibility pass on Toggle control
Details on individual bugs can be found on SharePoint

• [x] Bug 1: [Accessibility][Programmatic access]: Buttons must have discernible text. False positive in Accessibility Insights for Web tool.

Component: Toggle
@micahgodbolt

[dzearing]

@TestAccessibilityGIT trying to understand the clear change we need to make for this issue. Are you suggesting we render hidden text and cross reference using "for" attribute? Thanks!

[ecraig12345]

@TestAccessibilityGIT Could you please answer David's question from the previous comment? Otherwise I can't do anything with this bug.

[awalia13]

@dzearing - The issue is that there is a element but it has no value provided. And as per accessibility standards we must have value for button attribute.
Suggested Fix: please provide aria-label to button so that screen reader should be able to announce when it receives focus.

[JasonGore]

There are a few things we need to clarify here:

• The issue as reported isn't descriptive enough. We should clarify whether an actual ARIA standard is being violated and reference it. I'm not sure if aria-label was inferred or reported outside of this issue's history, but I don't think it's root cause here.
• aria-label is NOT a required property. In fact, the ARIA standards specify:

If the label text is visible on screen, authors SHOULD use aria-labelledby and SHOULD NOT use aria-label.

• If Toggle has a descriptive label on it, we should NOT be redundantly putting this information in aria-label. Instead, we should be using aria-labelledby to point to the existing label text.
  
  
  
  • No ARIA is better than bad ARIA. Don't be redundant.
  
  
• This bug sounds like it could be an app bug. If the app is providing label text for Toggles and it is not being narrated (aria-labelledby is not set), only then does it sound like this is a Fabric bug.

[TestAccessibilityGIT]

+Amit

[v-doku]

This issue was found using tool (Accessibility Insights for Web) and these are the fixes hint provided by the tool.

Fix ONE of the following:
Element has a value attribute and the value attribute is empty
Element has no value attribute or the value attribute is empty
Element does not have inner text that is visible to screen readers
aria-label attribute does not exist or is empty
_aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty_
Element's default semantics were not overridden with role="presentation"
Element's default semantics were not overridden with role="none"
Element has no title attribute or the title attribute is empty

so as mentioned by @JasonGore we are also good if we insert aria-labelledby attribute and provide respective reference to it.

[JasonGore]

Just to summarize some discussions that happened outside of this issue thread, the Accessibility Insights for Web team seems to agree that the use of the for attribute with label and button is enough to define their relationship and that using aria-label or aria-labelledby is redundant with the existing for attribute. The Accessibility Insights for Web team entered an issue essentially verifying that this is a false error.

[TestAccessibilityGIT]

+Amit

[khmakoto]

Thanks @JasonGore for summarizing the discussions that happened outside of the issue thread. Given the conclusion achieved from said discussions, I'm closing this issue.

Thanks to everyone involved.