AVT 3 - React & Vanilla Toggle Component: VoiceOver does not announce labels

[snidersd]

Environment

Tested on macOS Mojave 10.14.5, Version 74.0.3729.157 (Official Build) (64-bit), with VoiceOver

Description

Tab to the default toggle component.
Click on the Enter or Space Key
VoiceOver does not announce the On / Off label

Note: It looks like aria-hidden="true" was recently added to the toggle component. If the aria-hidden is removed the label is read correctly. (see screenshot)

[emyarod]

it seems this directly opposes the feedback provided here #1794

[snidersd]

With regard to #1794 - It states: (One screen reader that I tried said "Checkbox OffOn OffOn checked" :)
You might want to try adding aria-hidden="true" to either the Off or On span, depending on the current state.

My understanding of issue #1794 is the screen reader is announcing both "OffOn" for a checked toggle, rather than "On".
Adding aria-hidden="true" to the appropriate state would stop the screen reader from announcing the label associated with the inactive state.
For example:
If the state is aria-checked="true" the Off label should have aria-hidden="true" so the screen reader only announces the "On" label.
If the state is aria-checked="false" the On label should have aria-hidden="true" so the screen reader only announces the "off" label.

[carmacleod]

Hi, @snidersd!

Thinking about this even more, I've realized that "On" and "Off" are actually not the toggle's label.
"On" and "Off" are the state, and that is already communicated effectively in screen readers as "checked" or "not checked/unchecked" (JAWS&NVDA/VoiceOver).

The label would be the string that says what the toggle is for, i.e. "Show preview" or "Enable autocorrect".

If we allow the screen reader to read the "On" or "Off", then we get the following, which are redundant and potentially even confusing (i.e. what does "Off not checked" mean? Does it mean "On"?):

• JAWS and NVDA:

  • On checkbox checked
  • Off checkbox not checked

• VoiceOver:

  • On, checked, checkbox
  • Off, unchecked, checkbox

So I think it would be best to keep the "On" and "Off" strings hidden from screen readers - do you agree?

@emyarod and @asudoh, please note: A Toggle should always have a label - otherwise, how are users supposed to know what they are toggling? The label can be visible (preferred) or invisible (using either aria-label or class="bx--assistive-text"). It would be great if Carbon could promote labels more in the examples. :)

[snidersd]

Hi @carmacleod, If the toggle only uses On/Off as a state and not a label, I agree that they can be hidden. But as you mentioned, there is still an issue with the component since the APG for a checkbox requires a label.

[snidersd]

@dakahn Please add this issue to the IBM Carbon Copy Milestone. Thx!

[emyarod]

ok so if I understand correctly:

• the on/off text is not a label and should not be a label element (and can be hidden)

• the current toggle example (see below) using fieldset and legend to label the toggle is not ideal and should be replaced with an actual label

<!-- current toggle example with "label" -->
<fieldset class="bx--fieldset">
  <legend class="bx--label">Toggle w/ Label</legend>
  <div class="bx--form-item">
    <input class="bx--toggle" id="toggle2" type="checkbox">
    <label class="bx--toggle__label" for="toggle2">
      <span class="bx--toggle__text--left">Off</span>
      <span class="bx--toggle__appearance"></span>
      <span class="bx--toggle__text--right">On</span>
    </label>
  </div>
</fieldset>

is that right?

[snidersd]

@emyarod Yes, that is correct. The legend is used for a group of controls to highlight common attributes of all controls, for example, to advise that all fields in the group are required. Then as shown in the APG each toggle must have an associated label. Also see additional information on Grouping Controls.

[carmacleod]

In case it's helpful, Scott O'Hara has some decent accessible switch (aka toggle) examples here: https://scottaohara.github.io/aria-switch-control/

Looks like he was playing around with using different html elements - there's a couple that are implemented with button, one with div, one with anchor, and the last one "Enable something" uses a checkbox input inside an html label.

See also: https://scottaohara.github.io/a11y_styled_form_controls/src/checkbox--switch/

[emyarod]

@snidersd @carmacleod thank you for the clarification. I would appreciate your feedback and testing on #2885 which should address this issue