Skip to content

Ensure accessible target size for controlsΒ #7549

Open
@Malvoz

Description

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

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-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}

Leaflet/dist/leaflet.css

Lines 359 to 362 in 0f904a5

.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}

Metadata

Assignees

No one assigned

    Labels

    accessibilityAnything related to ensuring no barriers exist that prevent interactions or information accessneeds decision

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions