Ensure accessible target size for controls #7549
Labels
accessibility
Anything related to ensuring no barriers exist that prevent interactions or information access
needs decision
Motivation
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 Leaflet controls.
Edit: WCAG 2.2 (though it should be noted that the 2.2 version has not reached Recommendation status yet) has a more forgiving (from a designer's point of view!) Success Criterion: 2.5.8 Target Size (Minimum) which instead requires these targets to be at least 24 by 24 in CSS pixels.
Proposed solution
Increase the size of the following controls to 44x44 px (or 24x24 per WCAG 2.2 SC 2.5.8).
Leaflet/dist/leaflet.css
Lines 284 to 286 in 0f904a5
Leaflet/src/layer/marker/Icon.Default.js
Line 26 in bc918d4
(Changing the marker's
width
andheight
to44px
would cause it to stretch. Either the image would need to be modified orpadding
(right and left) could be modified to achieve a 44 by 44 px target.)Leaflet/dist/leaflet.css
Lines 517 to 518 in 0f904a5
Additional context
Increasing the default size of controls would also have the benefit of not needing extra CSS for conditional
leaflet-touch
sizing (presumably, since the controls would be large enough by default). For example, the following lines could be removed:Leaflet/dist/leaflet.css
Lines 316 to 320 in 0f904a5
Leaflet/dist/leaflet.css
Lines 359 to 362 in 0f904a5
The text was updated successfully, but these errors were encountered: