Marker accessibility · mapbox/mapbox-gl-js#11763

(2 comments) (6 reactions) (0 assignees)JavaScript (10,532 stars) (2,203 forks)batch import

feature :green_apple:good first issue

Description

How is marker accessibility achieved in MapBox?

Should default markers be focusable?
- In Google Maps only interactive markers are focusable and have role="button":
  
  Markers now default to the “img” accessibility role, or the “button” accessibility role if they are interactive (such as when a click event listener is registered). Interactive markers are also keyboard navigable [...]
- (This may also be the case for Leaflet in the future: https://github.com/Leaflet/Leaflet/issues/8116)
- Related: https://github.com/mapbox/mapbox-gl-js/pull/11064/commits/53f0eaf1626938a96d622cea2c12557f43468a42
Is there a need for authoring guidance? Similar to Leaflet's Guideline for accessible markers.
Autopan markers into view on focus is great for keyboard users, please consider it.

Tech stack: javascript
Domain: frontendaccessibility
Issue type: feature
Difficulty: 3
Estimated time: 1-2 days
Activity status: stale
Clarity: needs investigation
Prerequisites: JavaScriptDOMAccessibility (ARIA)Mapbox GL JS basics
Newbie friendliness: 35
Research direction: Investigate how markers are rendered in the source (likely src/ui/marker.js). Review the referenced PR #11064 and its commits for previous work. Study Leaflet's approach to accessible markers and their guidelines. Determine existing accessibility support and propose a plan to make markers focusable with appropriate ARIA roles and autopan on focus. Engage with maintainers via comments to clarify scope.