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

[Malvoz]

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="maplibregl-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 maplibregl-ctrl-icon icon instead:

<button ...
  aria-label="Zoom in">
  <span class="maplibregl-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".

---

(The same issue was also reported with MapBox: mapbox/mapbox-gl-js#11036.)

[rbrundritt]

Good distinction on both and when to use one, the other, or both: https://mauss.dev/posts/aria-label-vs-title-attribute

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[github-actions]

This issue was closed because it has been stalled for 30 days with no activity.