mapbox/mapbox-gl-js

[accessibility] Accessible target size for controls

Open

#11.037 geöffnet am 18. Sept. 2021

Auf GitHub ansehen
 (1 Kommentar) (1 Reaktion) (0 zugewiesene Personen)JavaScript (2.203 Forks)batch import
good first issue

Repository-Metriken

Stars
 (10.532 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

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

Research-Richtung
Dieses Issue fordert, sicherzustellen, dass interaktive Steuerelemente in mapbox gl js die WCAG 2.1 Zielgrößenanforderungen erfüllen, indem CSS Padding hinzugefügt wird, um die Tippzielfläche auf mindestens 44x44 CSS Pixel zu vergrößern. Die identifizierten Steuerelemente umfassen: Attributionsbutton, Popup Schließbutton, Vollbild /Geolokalisierungssteuerelemente, Marker und Navigations Zoom /Kompassbuttons. Suchen Sie nach Steuerelementklassen wie 'mapboxgl ctrl attrib button', 'mapboxgl popup close button' usw. in den CSS Quelldateien (wahrscheinlich in 'src/css/'). Fügen Sie diesen Elementen Padding hinzu, während die Symbolgröße unverändert bleibt. Testen Sie, ob das Padding das Layout nicht zerstört. Das Issue hat keine verknüpften PRs, daher ist die Implementierung offen. Überprüfen Sie das im Issue verlinkte WCAG Verständnisdokument für Anleitungen.
Tech Stack
javascript
Domain
frontend
Issue Type
Barrierefreiheit
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
GitCSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
80