Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toggle: Improve screen-reader accessibility #1557

merged 5 commits into from Apr 20, 2017


None yet
4 participants
Copy link

commented Apr 19, 2017

Pull request checklist

  • Addresses an existing issue
  • Include a change request file if publishing
  • New feature, bugfix, or enhancement
    • Includes tests
  • Documentation update

Description of changes

The Toggle is currently not very accessible for screen-reader users as it doesn't have hooks that let us provide context on the option that's being toggled. This pull request adds two optional aria-labels that lets us provide more context on the on/off states for screen-reader users.

Video of screen-reader behavior after applying the pull-request.

It's not ideal that the screen-reader re-announces the toggle onText and offText, however, this is not easily preventable as many browser/screenreader combinations will announce aria-hidden children while reading the parent.

Focus areas to test

  1. Open Narrator on Windows 10.
  2. Open the Toggle example in Edge.
  3. Navigate to "enabled and checked" toggle.
  4. Hear the screen-reader speak the onAriaLabel.
  5. Press enter to state-switch the toggle.
  6. Hear the screen-reader speak the offAriaLabel.

This comment has been minimized.

Copy link
Contributor Author

commented Apr 19, 2017

@mikewheaton: Thanks for the quick sign off. I don't have merge-access, so could you please also hit merge before master advances again?

@micahgodbolt micahgodbolt merged commit bf60dbc into OfficeDev:master Apr 20, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed

@c-w c-w deleted the c-w:bugfix/toggle-screenreader-improvements branch Apr 20, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.