[accessibility] Accessible target size for controls
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
The WCAG 2.1 SC 2.5.5 Target Size requires targets for pointer input to be at least 44 by 44 in CSS pixels. Meeting this requirement has multiple benefits, it'd be great to pass this criteria for the commonly used controls:
- Attribution control (
mapboxgl-ctrl-attrib-button) - Popup close button (
mapboxgl-popup-close-button) - Fullscreen control (
mapboxgl-ctrl-fullscreen) - Location control (
mapboxgl-ctrl-geolocate) - Markers (
mapboxgl-marker) - Navigation controls:
- Zoom in (
mapboxgl-ctrl-zoom-in) - Zoom out (
mapboxgl-ctrl-zoom-out) - Compass/reset bearing (
mapboxgl-ctrl-compass)
- Zoom in (
- etc.?
It may not be desirable to increase the size of the icons themselves, in which case padding can be used to increase the size of the tap targets.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the markup and styling for the listed controls: attribution, popup close, fullscreen, geolocation, markers, and navigation controls. Check their rendered pointer targets against WCAG 2.1 SC 2.5.5, then verify that each target reaches at least 44 by 44 CSS pixels without unnecessarily enlarging the icons.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100