Minimum target size of controls is 24 by 24 pixels
New in WCAG 2.2
Overview
When page controls like buttons and form inputs are small, it's much harder to hit the target area accurately without accidentally activating a different control. This can especially happen on mobile devices, and frustrate people who have difficulty with fine motor control. Making targets big enough or giving them enough space can help prevent accidentally clicking the wrong control.
Best Practices and Tips
Any standalone control on a page that can be activated with a pointer (button, form input, link) must have a minimum target size of 24 by 24 pixels.
Exceptions to Target Size
- Controls can be less than 24 by 24 CSS pixels if there is enough space between them.
- Example: Two side-by-side buttons that are 16 pixels in width and height need at least 8 pixels of space between them to equal the 24 pixel requirement (16 + 8 = 24).
- The function can be achieved through a different page control that meets this criterion.
- The target is in a sentence or constrained by the line height of the text around it.
- Example: a link in a paragraph doesn't have to be 24 by 24 pixels in height and width.
- The size isn't modified by the author.
- Example: the style is set by the browser, or the input uses the default browser styles.
- The target's sizing can't be changed without affecting its meaning or functionality, or is legally required for the information being conveyed.
Examples/Patterns
Accessible Example: Large Icon Size
By default, Western's primary social media links are set at 40px and larger, and have space between them.
Accessible Example: Smaller Icon with Spacing
If the icons had to be smaller (20 pixels as an example), adding 4px or more spacing would keep the targets far enough apart and pass the minimum target size requirement.
Inaccessible Example
If the smaller version of icons were used, but didn't have spacing between them, this would create a target size issue and not pass the minimum target size requirement.
Resources
No resources available yet.