Currently, this library only uses opacity to visibly hide the tooltip. It then makes its content available to screen readers by overriding the accessible name of the associated node. This leads to a situation where the content is visibly hidden but still present in the accessibility tree.
Various screen readers disagree about what to do with content that has opacity set to 0. Some screen readers will ignore this content, but VoiceOver reads it out. This means that VoiceOver effectively reads out the content of aria-label twice, once when the cursor is on the tooltip node itself, and again when the cursor is set to the ::after pseudo-element.
To replicate:
Implement the tooltip in the DOM
Open OSX VoiceOver
Use VO-right to traverse the page
Notice that VO will read out the tooltip node and will also stop on the ::after element, reading out the content again
In my own work, I got around this by setting display: none on the ::after element, then unsetting it on focus or hover. This breaks the animations in the tooltip, but provides, in my estimation, a better experience on a screen reader.
Currently, this library only uses
opacityto visibly hide the tooltip. It then makes its content available to screen readers by overriding the accessible name of the associated node. This leads to a situation where the content is visibly hidden but still present in the accessibility tree.Various screen readers disagree about what to do with content that has opacity set to 0. Some screen readers will ignore this content, but VoiceOver reads it out. This means that VoiceOver effectively reads out the content of
aria-labeltwice, once when the cursor is on the tooltip node itself, and again when the cursor is set to the::afterpseudo-element.To replicate:
::afterelement, reading out the content againIn my own work, I got around this by setting
display: noneon the::afterelement, thenunsetting it on focus or hover. This breaks the animations in the tooltip, but provides, in my estimation, a better experience on a screen reader.