Summarize visible places and roads

[1ec5]

Some hidden element should summarize the state of the map. The iOS implementation in mapbox/mapbox-gl-native#9950 summarizes the following information whenever the user zooms in or out:

• The zoom level
• The number of visible annotations (markers)
• The number of visible places (POIs), followed by a list of three visible places
• The number of visible roads (Make roads accessible #2)

https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2293-L2330

/cc @tristen

[orangemug]

A branch attempting to summarise a map mb-pages...orangemug:feature/issue-5

I'm still a little unclear which element the aria-* should exist on but since the <canvas/> has the tabIndex that seems to make sense. Has anybody got any good resources (blogs, tech specs, etc...) for maps and accessibility?

[andrewharvey]

Yep the canvas has aria-label=Map[1] by default, which was added in mapbox/mapbox-gl-js#3782.

That canvas element is the one that needs to be focused for the arrow keys to pan the map so using a label like "Map" helps users using assistive technologies know this is the map element.

The spec says aria-label "provides the user with a recognizable name of the object", so I don't think it's right to overload it with a longer description. I think aria-describedby is where a longer description should go.

As for the description is likely very application dependent, so good to make it settable. Could be simply "Map of London" or "Map of pubs in London".

I'm not sure about including the zoom level as a number, as users don't know about zoom levels. I think describing the location as "Map of the world", "Map of Europe", "Map of UK", "Map of London", "Map of South Bank", "Map of Bernie Spain Gardens" does a better job.

[1] https://github.com/mapbox/mapbox-gl-js/blob/744adc7e4db29384c5ebe4e109657239dcb01b55/src/ui/map.js#L1474

[1ec5]

I'm not sure about including the zoom level as a number, as users don't know about zoom levels.

mapbox/mapbox-gl-native#4821 has an example of the VoiceOver summary format in MapKit, which the Mapbox Maps SDK for iOS now mimics. These SDKs include the zoom level because there’s also a built-in gesture for zooming the map in and out. Essentially it’s a readout of the slider’s current state. Similarly, the lists of visible annotations, places, and roads are present because both SDKs allow the user to navigate through the full list of annotations, places, and roads one by one. Without those controls, I agree that this summary format would seem a bit contrived.

[orangemug]

Hey @1ec5 @andrewharvey so I think there is some confusion. To add iOS SDK parity I believe we just need to implement https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2293-L2330

So this is aims to be the first part of that implementing

• The zoom level - https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2298
• The number of visible annotations - https://github.com/mapbox/mapbox-gl-native/blob/dcd7da14f6627a09a5840a3046b5708449962f69/platform/ios/src/MGLMapView.mm#L2320

Can you confirm that's whats required?

@andrewharvey as for aria-label good catch I'll remove that.