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

Improve accessibility of tooltip help #2856

Merged
merged 6 commits into from Sep 4, 2019
Merged

Improve accessibility of tooltip help #2856

merged 6 commits into from Sep 4, 2019

Conversation

wpsmort
Copy link

@wpsmort wpsmort commented Aug 30, 2019

Issue #2524

Proposed changes

This improves the accessibility of our tooltip help for users who use a screen reader. This PR makes three changes to the UI:

  • It adds tabindex to the help icon so that you can tab to the help icon so that a screen reader can read the help text
  • It adds the option name to the help text so that there is context to the help (which option the help is relevant to)
  • It removes the colon from the end of all option labels (some have a colon some don't) so that our option labels are standardized and so that the option name in the help text can have a colon to add a pause when using screen readers

Types of changes

  • Improves existing functionality (UI)
  • Improves existing code

Checklist

  • I've selected the appropriate branch (ie x.y rather than master).
  • I've created an appropriate title, descriptive of what the PR does.
  • Travis-ci runs with no errors.

Testing instructions

  • Install a screen reader or enable the screen reader feature in your browser or OS
  • Tab through all settings to verify you can tab from the help icon to the option input
  • Verify that as you tab to the help icon, the screen reader should read the option name followed by the help text
  • Verify that the colon has been removed from all option labels so that the standard for all options is no colon at the end of the label

Further comments

A note about removing the colon from labels: We've not had a standardized format for option labels in the past so some labels ended with a colon and some did not (older labels from pre v2.0 had colons).

This not only adds a standard label format for all labels but it also allows for the colon to be added in the help text which results in a pause between a screen reader reading the option name and the option text which is good for usability.

@wpsmort wpsmort added this to the 3.3 milestone Aug 30, 2019
@arnaudbroes
Copy link
Contributor

@wpsmort I made a small change where I added an H4 to make it look better for our regular users. Screen readers should ignore it. Let me know what you think.

@arnaudbroes arnaudbroes assigned wpsmort and unassigned arnaudbroes Sep 1, 2019
@wpsmort
Copy link
Author

wpsmort commented Sep 3, 2019

This is tested and is good. The change made by Arnaud is good.

Copy link
Contributor

@EkoJR EkoJR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good and approved

@EkoJR EkoJR assigned michaeltorbert and unassigned EkoJR Sep 4, 2019
@michaeltorbert michaeltorbert removed their assignment Sep 4, 2019
@michaeltorbert michaeltorbert merged commit 851e11a into 3.3 Sep 4, 2019
@michaeltorbert michaeltorbert deleted the issue2524 branch September 4, 2019 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants