Minimum target size of controls is 24 by 24 pixels

New in WCAG 2.2

Applicable Role(s): Designer, Developer

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

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.

Pattern Examples

Accessible Example: Large Icon Size

By default, Western's primary social media links are set at 40px and larger, and have space between them.

A set of six social media links as blue circles with white icons side by side and spaced out

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.

The social media link circles are now smaller, and separated farther apart

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.

The same smaller icons in one line are now up against each other, creating no space in between

Resources

  • No resources available yet.

Need Accessibility Help?

Contact Carly Gerard

Contact David Engebretson