Add screen reader support using aria-label attribute #137
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This changeset modifies `hint-core.scss` to use `aria-label` as its source so that the tooltip content can be read by screen-readers. This pattern is used in GitHub's "Primer" framework (see http://primercss.io/tooltips/) Doing so required all base styles to be applied to the `hint--`-prefixed classes, since `data-hint` is no longer used. To test these changes I modified `demo.html` to use the new `aria-label` pattern, then modified the "bottom-right" demo button so that its tooltip read off "Hello, world." I confirmed that the sentence was read off by a screen-reader (VoiceOver in Safari, as well as ChromeVox in chrome). These changes come with the assumption that tooltips are in fact a label for the element they are annotating - meaning that the contents of the element will be skipped over by the screen-reader in favor of the tooltip's contents. If the tooltips are primarily used to annotate icons, this is perfectly acceptable.
Populate tooltip content using the aria-label attribute
|
I tested it and I think this PR is great. I would suggest mentioning |
|
@tfoxy Yeah. Will update the docs. |
|
@chinchang Do you know if this will make it into the next release / when that will be!? This really would be a great feature to have! |
|
@rossholdway I am working on the final changes for this to get merged into master. This will be live in the coming release this weekend. |
| } | ||
| // If the `data-hint` attribute is present, use it. | ||
| // This might be deprecated in future in support of a11y. | ||
| &[data-hint]:after { |
There was a problem hiding this comment.
Very cool trick @tfoxy @chinchang :)
chinchang
force-pushed
the
a11y
branch
2 times, most recently
from
ca9aaed to
9317acf
Compare
|
Merging into dev. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Carrying forward @jdan original PR #128 to support screen reader a11y by using
aria-labelattribute.Copy from #128:
This PR now puts in default support for
aria-labelattribute to define tooltip content along with the currently supporteddata-hintattribute. So any of the attributes will work.Opening this PR against
devwhere I can finally work on the related docs and examples for this to get ready formaster.Note: Ignore the CSS files in the diff :)