Add WCAG 2.2 SC 2.5.8 - Target Size (Minimum) (AA)

[mgifford]

WCAG 2.2 SC 2.5.8:

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:

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 1

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, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Note 2

For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.

List the tasks for the SC.

Child issue of #65

[mgifford]

Worth looking at 2.5.5 https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

Here https://www.w3.org/WAI/planning/arrm/wcag-sc/ as it is very similar.

[dboudreau]

I suggest we begin with this one, as we covered the basics thanks to SC 2.5.5 (AAA)

Here's what SC 2.5.8 says:

Success Criterion 2.5.8 Target Size (Minimum)
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:

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

We already have task ID CSS-023 related to SC 2.5.5 (AAA), which reads as follows:

• Unless the interactive element is part of a sentence or a block of text, its size must be at least 44 x 44 pixels.
• Primary: Visual Design | Secondary: none | Contributor: none

It might be a good idea to begin with this one, as we can use CSS-023 as a way to get back into the right mindset.

[dboudreau]

SC 2.5.5 says the following:

Success Criterion (SC 2.5.5 AAA)
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

• Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
• Inline: The target is in a sentence or block of 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 to the information being conveyed.

[khawk27]

From my work, this is what I have as a task for a visual designer:

In the designs for any actionable element that is adjacent to another actionable element, ensure either:

• The size of each actionable element is at least 24 by 24 CSS pixels.
• The size of each actionable element together with its padding is at least 24 by 24 CSS pixels.
• The target offset is at least 24 CSS pixels to every adjacent target.

In the documentation for every actionable element, note the target size and / or the target offset.

[mgifford]

Role mapping by ChatGPT and links mostly from me.

WCAG 2.2 SC 2.5.8 – Target Size (Minimum) (AA)

AI Generated Role Mapping (ARRM)

• Primary: UX Designer – defines minimum size and spacing rules for interactive elements.
• Secondary: Visual Designer – responsible for designing controls that meet the size/spacing requirements.
• Contributor: Front-End Developer – implements the sizes and spacing consistently in code.

AI Generated Additional Context

• Requirement: interactive targets must be at least 24×24 CSS pixels.
• Exceptions include:
  • Inline targets within text.
  • Targets sized/controlled by the user agent (not modified by the author).
  • Targets whose small size is essential to the activity (e.g., precision tools in drawing apps).
  • Cases where an equivalent larger target or increased spacing is available.
• Common fixes: add padding around icons, increase spacing in toolbars, use larger tap/click zones.
• Common failures: small icon-only buttons, tightly clustered links or controls, inadequate spacing in mobile views.

References

• GetStark: Target Size (Minimum) – explanation and examples
  https://www.getstark.co/wcag-explained/operable/input-modalities/target-size-minimum/
• W3C Understanding 2.5.8 – official guidance
  https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
• BeAccessible – WCAG 2.2 checklist
  https://beaccessible.com/post/wcag-2-2-checklist/
• Parachute Design – WCAG 2.2 overview
  https://parachutedesign.ca/blog/wcag-2/#Success_Criteria_327_%E2%80%9CVisible_Controls%E2%80%9D
• Equally AI – WCAG 2.2 checklist
  https://blog.equally.ai/web-accessibility/wcag-2-2-simple-checklist/
• W3C ARRM – Accessibility Roles & Responsibilities Mapping
  https://www.w3.org/WAI/planning/arrm/

[khawk27]

Well this is an example of where AI just gets it wrong. We've concluded that visual designers are responsible for target sizes, not UX designers.

[dboudreau]

Here is my suggested list of tasks for today<s conversation on breaking down SC 2.5.8 into a series of tasks:

• Provide a minimum height and width of 24 CSS pixels for each interactive target.
• Maintain at least 24 CSS pixels of spacing around any target that is smaller than 24 by 24 CSS pixels.
• Add whitespace or padding between adjacent targets to reduce the risk of accidental activation.
• Combine related controls within a single target area that is at least 24 by 24 CSS pixels.
• Design targets so they can be activated without requiring fine motor precision or exact pointer movements.
• Exclude inline links or controls from the 24 by 24 CSS pixels target size requirement.

Looking forward to our discussion.

[mgifford]

@khawk27 AI can and will get things wrong. It's just a useful starting point for us to rip apart.

The first draft is assumed to be wrong, but I'm also not sure where the responsibility for target sizes falls. So often it isn't defined when it gets to the Front End Engineer. It is unusual to see it in wireframes (for my limited experience). Would you see Visual Designers having the primary role and UX designers as the secondary?

[JennChadwick]

Adding the request to update one of the tasks @dboudreau created for 2.5.8. They are all great.

Recommend a slight explanation update:

"Combine related controls within a single target area that is at least 24 by 24 CSS pixels."

to:

"Combine related controls, that is those with the same functionality, purpose and/or destination, within a single target area that is at least 24 by 24 CSS pixels."

[mgifford]

Summary of our progress from today's meeting.

WCAG SC	Level	Content Type	Tasks	Main Role	Primary
2.5.8 Target Size (Minimum)	AA	CSS and Presentation	Provide a minimum height and width of 24 CSS pixels for each interactive target that is not an inline link or control.	Design
2.5.8 Target Size (Minimum)	AA	CSS and Presentation	Maintain at least 24 CSS pixels of spacing around any target that is smaller than 24 by 24 CSS pixels.	Design
2.5.8 Target Size (Minimum)	AA	CSS and Presentation	Add whitespace or padding between adjacent targets to reduce the risk of accidental activation.	Design
2.5.8 Target Size (Minimum)	AA	CSS and Presentation	Combine related controls within a single target area that is at least 24 by 24 CSS pixels. Combine related controls …(similar purpose or something?) within a single target area that is at least 24 by 24 CSS pixels. – Jenn	Design	UX Designer
2.5.8 Target Size (Minimum)	AA	Input Modalities	Ensure a programmatic grouping for related controls … within a single target area that is at least 24 by 24 CSS pixels. – wording from Solomon	Development	Front-End Developer
2.5.8 Target Size (Minimum)	AA	Input Modalities	Design targets so they can be activated without requiring fine motor precision or exact pointer movements.	Design

[SolomonHsu]

Hi Team,
Sorry that I can't make it to the meeting today. However, I've been thinking about what we discussed in the past couple of weeks. I agree that it made sense for UX designer to proper define the UX. However, developers should still hold some accountabilities for the target size when implementing. So that this can clear the ambituities for what developers should do to meet the target size
Here's what I'm proposing basing on what Mike helped forwarded above.

`
Input Modalities

Ensure related controls defined by UX designer are programmatically grouped and interactive within a single target area that is at least 24 by 24 CSS pixels.
`

[dboudreau]

Thank you all for a very productive session today. We made good progress on SC 2.5.8 and we've almost wrapped it up. Here's what we came up with in terms of the tasks that directly relate to this SC (and don't fall under some other WCAG SC):

• Provide a minimum height and width of 24 CSS pixels for each interactive target that is not an inline link or control.
• For any control that is less than 24 by 24 CSS pixels, add padding so that the target area is at least 24 by 24 CSS pixels.
• Combine controls with the same functionality or destination within a single target area that is at least 24 by 24 CSS pixels.
• Ensure any programmatic grouping of controls has a target area of at least 24 by 24 CSS pixels.

@anna-yeddi - we still had some comments form you last time that we did not address since you couldn't make it to today'S call, but they are still open for discussion if you want to pursue those conversations (you are 100% welcome to bring any of that up, so don't feel like you shouldn't!):

Suggestions from Anna to discuss (2025-09-04):

• Ensure that the same page provides a control that is either 24 by 24 or is an unmodified browser-provided control that performs the same function.
• Use unmodified semantic controls that are provided by the user agent (i.e. a browser)
• If a target is less than 24 by 24 CSS pixels, ensure a control that provides the same functionality and has sufficient size is available on the same page.
• Ensure there is no overlap of interactive areas of controls.
• The appearance of the target is legally required or an essential for the presented information.
• Maybe for the next time: replacing whitespace with an empty space since its not about the specific CSS prop, and it would be using a more inclusive term.

We will leave this issue open util we all feel comfortable with the list of tasks and assigned responsibilities.

As usual, our working document is here: https://docs.google.com/spreadsheets/d/1pZzg_AkXUHteSMUPX3bQlyPSxNnObecB-P7OZGJJXCo/edit?gid=0#gid=0

[dboudreau]

@SolomonHsu, hopefully, what we captured in the last task (row 19) addresses most of your concerns related to the contribution of the front-end developer. Please let us know! :)