[accessibility] Make the map container a distinct semantic structure that entails all its components

[Malvoz]

When visual users look at a map they can easily tell that the controls, attribution, and other (potentially custom) UI components that are placed on the map belong to it. AT users rely on HTML semantics, DOM structure, and ARIA to convey these things and their relationships.

Currently, the tabindex="0", aria-label="Map" and role="region" (which together convey the focusable "map component") are set on the <canvas> which means that any components that are placed outside of it (e.g. the maplibregl-control-container controls and potential custom UI components) aren't programmatically determinable as related to the map's structure.

Notice how in the accessibility tree the button is seemingly not part of any particular semantic structure:

If tabindex="0", aria-label="Map" and role="region" were moved from <canvas> to <div class="maplibregl-map"> the correct structure would be accomplished (and logical focus order guaranteed). However, in this case I suppose the div would have to act as a proxy for canvas in terms of user input, and probably other things, which might get messy.

Another option is to use aria-owns which is seemingly widely supported, straight forward to use, and produces the desired result:

Although, the number 1 rule of using ARIA is to avoid using ARIA if you can. And there's also the consideration of how aria-owns should work with developers' custom UI components.

---

Relates to WCAG 2.1 SC 1.3.1 Info and Relationships.

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

[HarelM]

Can you make a PR to solve all the issues you opened about accessibility?

[Malvoz]

@HarelM Unfortunately I am not familiar with the MapLibre codebase, and MapLibre is only 1 of many web maps that I have reported issues for so it would not feasible for me to spend the time on all these projects.

[wipfli]

Thanks @Malvoz for opening the accessibility issues. I think they are valuable and if questions regarding accessibility come up, for example like in #344, I will take the freedom to ping you and ask for expert advice.

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