You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi! I think I have run into some undesired screenreader behavior with the tooltip component.
Describe the bug
A colleague (using Windows) and I (using a Mac) have tested the Shoelace tooltip component with a couple different screenreaders and browsers, and we found the behavior to not always be consistent.
This is the code that we tested: <sl-tooltip content="This is a tooltip"> <sl-button>Hover Me</sl-button> </sl-tooltip>
(Source)
Which gives the following results:
Mac VoiceOver screenreader on Chrome → "This is a tooltip" is read twice in a row.
Mac VoiceOver screenreader on Firefox → "This is a tooltip" is read twice in a row.
Mac VoiceOver screenreader on Safari → Works as expected: the content is read once.
Narrator screenreader on Edge → Works as expected: the content is read once.
NVDA screenreader on Firefox → Tooltip content is not read at all.
Additional information
My knowledge of accessibility is limited, but could this possibly be caused by having both aria-describedby="tooltip" on the anchor slot and an aria-live on the tooltip body? Maybe the Mac screenreader pics up both and the NVDA screenreader picks up neither?
We can definitely look into this, but we probably need to formally define which browser + screen reader combos we're actually testing in. I primarily use Safari + VoiceOver, as I've noticed Chrome + VoiceOver is usually pretty bad in comparison. I'm under the impression this is something screen reader users are aware of, but I'd love more information on real world usage if anyone cares to chime in.
That said, in my experience it's easy to spend hours trying to fix things like this in every possible combination, only to introduce new problems in other combos. There are just so many moving parts that it's somewhat unreasonable to tackle all of them. 😞
Again, we can look into this, but I'm not sure we'll be able to get it working 100% perfectly in every available combination of browser and screen reader.
Chrome on Windows is best tested in combination with JAWS (with NVDA also being useful),
Firefox on Windows is best tested in combination with NVDA.
(The survey results have nothing on Linux; where Orca is available. Orca is developed by the GNOME project, but I should warn you that it does not work equally well under each Linux distribution that offers a GNOME desktop. Debian and Ubuntu should be fine. Fedora probably also. But Orca on OpenSUSE's GNOME did not work out of the box in OpenSUSE Leap 15.1, 15.2 and 15.3. The survey doesn't mention either that Narrator works well with Edge, but Narrator is a bit more limited in some areas where JAWS and NVDA are better.)
Hi! I think I have run into some undesired screenreader behavior with the tooltip component.
Describe the bug
A colleague (using Windows) and I (using a Mac) have tested the Shoelace tooltip component with a couple different screenreaders and browsers, and we found the behavior to not always be consistent.
This is the code that we tested:
<sl-tooltip content="This is a tooltip"> <sl-button>Hover Me</sl-button> </sl-tooltip>
(Source)
Which gives the following results:
Additional information
My knowledge of accessibility is limited, but could this possibly be caused by having both
aria-describedby="tooltip"
on the anchor slot and anaria-live
on the tooltip body? Maybe the Mac screenreader pics up both and the NVDA screenreader picks up neither?Related issue
The text was updated successfully, but these errors were encountered: