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

Accessibility: Target Size #3431

Open
joepercival opened this issue Nov 20, 2024 · 1 comment
Open

Accessibility: Target Size #3431

joepercival opened this issue Nov 20, 2024 · 1 comment
Labels
Bug Something isn't working Community backlog An issue raised on the community backlog High priority

Comments

@joepercival
Copy link

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

@joepercival joepercival added Bug Something isn't working Community backlog An issue raised on the community backlog High priority labels Nov 20, 2024
@MagdalenaLarge
Copy link

Hi @joepercival,
Thank you for bringing it up to out attention. We will investigate this issue and provide the the outcome of it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Community backlog An issue raised on the community backlog High priority
Projects
None yet
Development

No branches or pull requests

2 participants