Populate tooltip content using the aria-label attribute #128
Conversation
…hang#81 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.
|
In your response you outlined the following strategy for generating the tooltip text:
Do you know if it's possible to do this with |
|
👍 |
|
This would be really helpful to get merged in, any progress on this @chinchang? |
Populate tooltip content using the aria-label attribute
|
Excellent, keep me posted! Happy to contribute in any capacity. |
|
Hey @chinchang - any updates on the timeline to get this work merged back into master? |
|
I went through the specs for Though they seem to have a provision for fallback syntax in it doesn't look like its implemented in browsers yet! So that means handling How does that sound? Comments, suggestions? |
|
My suggestion is to use Separating them into two files sounds fine, just hoping folks will use it! |
|
We'd definitely use hint-a11y.css if it were provided. |
|
@jdan @danlopez :) You guys are a11y supporters! Though I am also running a poll to get more inputs: https://twitter.com/hint_css/status/722155293518376961 BTW, good news is that I have been able to provide support for both Would be great if you guys can review #137 |
Hi @chinchang!
Copying some notes from my original issue comment:
You'll see that using
aria-labelinstead ofdata-hinthas the same results:But the tooltip's contents are now accessible to screen-readers:
These changes follow the assumption that the tooltip is labeling the element it is annotating. This means that screen-readers will not read off the actual content of the element itself, but only its tooltip.
Consider the following:
In the above scenario, "Checkout" will be omitted in favor of "You will be charged $5.00" by the screen-reader.