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

[accessibility] Consider conveying only one of aria-label and title in controls #11036

Closed
Malvoz opened this issue Sep 18, 2021 · 0 comments · Fixed by #11064
Closed

[accessibility] Consider conveying only one of aria-label and title in controls #11036

Malvoz opened this issue Sep 18, 2021 · 0 comments · Fixed by #11064
Assignees
Milestone

Comments

@Malvoz
Copy link

Malvoz commented Sep 18, 2021

Most controls use both aria-label and title with identical values,
for example the zoom in control:

<button ...
  title="Zoom in"
  aria-label="Zoom in">
  <span class="mapboxgl-ctrl-icon" aria-hidden="true"></span>
</button>

This would cause some screen readers, such as NVDA, to announce Zoom in twice. Although this is considered a bug (nvaccess/nvda#7841, in the case of NVDA) the issue can be fixed by conveying only one of title or aria-label.

To avoid double speak while maintaining the native tooltips from title the title attribute could be set on the mapboxgl-ctrl-icon icon instead:

<button ...
  aria-label="Zoom in">
  <span class="mapboxgl-ctrl-icon" aria-hidden="true" title="Zoom in"></span>
</button>

In this case the aria-label would be conveyed to ATs and the native tooltip still available on hover. But there would be no double speak as the title is hidden from ATs due to aria-hidden="true".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants