mapbox / mapbox/mapbox-gl-js

Marker accessibility

Open
#11,763 2 comments 6 reactions 0 assignees View on GitHub
feature :green_apple: good first issue
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

How is marker accessibility achieved in MapBox?

- [ ] Should [default markers](https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/) be focusable?
- In Google Maps _only_ [_interactive markers are focusable_ and have `role="button"`](https://mapsplatform.google.com/resources/blog/improved-accessibility-maps-javascript-api/):

> Markers now default to the [“img” accessibility role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img), or the [“button” accessibility role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_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](https://leafletjs.com/examples/accessibility/#markers-must-be-labelled).
- [ ] [Autopan markers into view on focus](https://github.com/Leaflet/Leaflet/issues/8040) is great for keyboard users, please consider it.

Contributor guide

Open the contributing guide

Research direction

Start with the default markers example and the related Mapbox GL JS pull request commit mentioned in the issue. Compare the listed focus, role, keyboard navigation, authoring guidance, and focus autopanning questions with the current behavior. Done requires a decided accessibility scope and corresponding implementation or guidance, but no target files or tests are identified.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
accessibility, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
28/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.