Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltips should be (reliably and deliberately) announced to screen reader users #8112

Closed
Malvoz opened this issue Apr 4, 2022 · 0 comments · Fixed by #8247
Closed

Tooltips should be (reliably and deliberately) announced to screen reader users #8112

Malvoz opened this issue Apr 4, 2022 · 0 comments · Fixed by #8247
Labels
accessibility Anything related to ensuring no barriers exist that prevent interactions or information access help wanted

Comments

@Malvoz
Copy link
Member

Malvoz commented Apr 4, 2022

Is your feature request related to a problem? Please describe.

When tooltips are toggled visible they're not reliably announced by screen readers.

This is because screen readers generally don't announce elements on DOM updates or changes to CSS (e.g. display).
(I.e. #8111 doesn't help the case for screen reader users.)

(I say "not reliably announced" because a side effect of the focus loss described in #8114 causes Narrator to announce all tooltips when only 1 is toggled opened. OTOH, in NVDA tooltips are not announced at all after being toggled visible.)

Describe the solution you'd like

For each open tooltip:

  1. Set role="tooltip" (on leaflet-tooltip)
  2. Set aria-describedby on the bound element(s) with an id reference to the tooltip(s)
    (space-separated id references if pointing to multiple tooltips)
Caveat: standalone tooltips

This proposed solution is not applicable to standalone tooltips since there's no element to be described using aria-describedby. No natural element anyway, could perhaps be hacked around... Anyway, this is the safest option, and as such another reason for implementers to try to avoid standalone tooltips.


Describe alternatives you've considered

1. Make the leaflet-tooltip-pane an ARIA Live region

By setting it to role="status", and aria-live="polite" per MDN's compatibility notes:

To maximize compatibility, add a redundant aria-live="polite" when using this role.

This will result in tooltips being announced to screen reader users when they're toggled visible.

However, this solution could potentially have negative effects on screen reader users if the Leaflet implementer is toggling tooltips irresponsibly (e.g. toggling without user interactions) or other unexpected ways. Additionally, this solution expects tooltips to exist in the default tooltip pane.


2. Focus delegation

I don't believe this is a good option, tooltips should NOT receive focus, at least this is true for browsers' native tooltips, and per the ARIA best practices for tooltips:

Tooltip widgets do not receive focus.


Additional context

Accessible tooltips using role="tooltip" and aria-describedby: https://zoebijl.github.io/apg-tooltip/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Anything related to ensuring no barriers exist that prevent interactions or information access help wanted
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant