Tooltip screenreader issue: content read double, or not at all

[yantevanham]

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?

Related issue

• Tooltip has some accessibility/screenreader issues around reading content #1794

[claviska]

Thanks for the report!

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. 😞

We generally try to follow WAI's guidelines for components. Tooltip, however, is a special case that uses aria-live for reasons mentioned in #219.

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.

[cstrobbe]

@claviska With regard to browser and screen reader combinations, I would refer to WebAIM's Screen Reader Survey #9. Based on this,

• 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.)

[claviska]

See also: #1794