mapbox/mapbox-gl-js

[accessibility] Accessible target size for controls

Open

#11,037 opened on Sep 18, 2021

View on GitHub
 (1 comment) (1 reaction) (0 assignees)JavaScript (10,532 stars) (2,203 forks)batch import
good first issue

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)
  • 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

Tech stack
javascriptcsshtml
Domain
accessibility
Issue type
accessibility
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSSHTMLJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
This issue asks to ensure that interactive controls in mapbox gl js meet WCAG 2.1 target size requirements by adding CSS padding to increase the tap target area to at least 44x44 CSS pixels. The controls identified include: attribution button, popup close button, fullscreen/geolocation controls, markers, and navigation zoom/compass buttons. Look for the control classes like 'mapboxgl ctrl attrib button', 'mapboxgl popup close button', etc. in the CSS source files (likely in 'src/css/'). Add padding to these elements while keeping the icon size unchanged. Test that the padding does not break layout. The issue has no linked PRs, so implementation is open. Review the WCAG understanding document linked in the issue for guidance.