Accessibility: Target Size #3431
Labels
Bug
Something isn't working
Community backlog
An issue raised on the community backlog
High priority
Describe the bug
The following ticket was raised on the SML catalogue website: SPP-12224
This is following investigation into WCAG 2.2 guidelines.
I believe the SML website is compliant with this ticket however this may be applicable to the ONS design system so I am raising it here.
Expected behaviour / outcome
Ticket description:
Some people with physical impairments cannot click small buttons which are close together
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
User agent control: The size of the target is determined by the user agent and is not modified by the author;
Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
Note: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
Note: For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed top to bottom, the line-height would be horizontal.
Acceptance Criteria:
There is space between the buttons so a user doesn't hit the wrong button (when riding a bus)
Team response:
We would need to undertake some investigation to check the size of the CSS pixels. If they are the wrong size, changes would need to be implemented by the Design system team and we would then need to update our system and check there are no backward breaking changes.
List the steps necessary to reproduce the bug
See ticket
Additional context
Raising this issue for awareness of WCAG 2.2 guidelines; however this may not be applicable and/or changes to the design system may not be required
What version of the ONS Design System are you using?
70.0.4
What device(s) are you using?
Desktop
What operating system(s) are you using?
macOS
What browser(s) are you using?
Safari
The text was updated successfully, but these errors were encountered: