Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure accessible target size for controls #7549

Open
3 tasks
Malvoz opened this issue Apr 10, 2021 · 1 comment
Open
3 tasks

Ensure accessible target size for controls #7549

Malvoz opened this issue Apr 10, 2021 · 1 comment
Labels
accessibility Anything related to ensuring no barriers exist that prevent interactions or information access needs decision

Comments

@Malvoz
Copy link
Member

Malvoz commented Apr 10, 2021

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;
}

@johnd0e johnd0e added the accessibility Anything related to ensuring no barriers exist that prevent interactions or information access label Apr 10, 2021
@Malvoz
Copy link
Member Author

Malvoz commented Apr 10, 2021

In any case 44 by 44 px cannot be achieved for these targets (for example, for markers it can get tricky if increasing the size of the image itself is not desired, but setting a padding is also not desired as it may cause markers to be unexpectedly interacted with since they're larger than percieved) it should be added as a known limitation in the accessibility statement.

@Malvoz Malvoz changed the title Ensure accessible target size for commonly used controls Ensure accessible target size for controls Feb 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility Anything related to ensuring no barriers exist that prevent interactions or information access needs decision
Projects
None yet
Development

No branches or pull requests

2 participants