A11y for screen readers

knownasilya / ember-toggle

Checkbox based Toggle Switches for Ember

http://knownasilya.github.io/ember-toggle/

MIT License

112 stars 52 forks source link

A11y for screen readers #161

Closed hornetnz closed 3 years ago

hornetnz commented 3 years ago

I'm using v5.3 and noticed that with voiceover on, its reading as "Group, 4 items. You are currently on a checkbox...". Our layout is using the toggles w/o the labels, so screen readers only see 'checkbox'.

Is there some way to have it not read as "Group, 4 items"?
Is there a way I can add a sr-only label?

knownasilya commented 3 years ago

Should be able to use block mode https://github.com/knownasilya/ember-toggle/tree/v5.3.3#advanced-usage

<XToggle
  @showLabels={{true}}
  @value={{this.value}}
  @onToggle={{action (mut this.value)}}
as |toggle|>
  <label for='some-id' class='sr-only'>Some Toggle</label>
  <toggle.switch id='some-id'/>
</XToggle>

Should work. Generally the internal id is generated, but since you aren't using any of the labels overwriting it might work. You could wrap this in your own component you can reuse.

hornetnz commented 3 years ago

Ahh ok. I had read that part of the doc, but I guess it didn't click because there was no HTML in the example. Thanks :)