All touch targets must be 24px large, or leave sufficient space

Rule ID: target-size
Ruleset: axe-core 4.9
User Impact: Serious
Guidelines: WCAG 2.2 (AA)
 

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact

Serious
Minor
Critical

Disabilities Affected

  • Blind
  • Low Vision
  • Mobility

Standard(s)

  • WCAG 2.2 (AA)

WCAG Success Criteria [WCAG 2.2 (AA)]

  • 2.5.8: MUST: Target Size

How to Fix the Problem

Correct markup solutions

Touch target has sufficient size or spacing

<button style="font-size: 24px">Submit</button>

    <button>+</button>
    <button style="margin-left: 10px">Adjacent Target</button>

Incorrect markup solutions

Touch target unobscured size is too small and is too close to another touch target

<button id="target">+</button>
    <button style="margin-left: -10px">Adjacent Target</button>

Why it Matters

Touch targets must have sufficient size and spacing in order to "be easily activated without accidentally activating an adjacent target." When touch targets are too small or too close together, it becomes difficult for users to activate them.

Having targets with sufficient size - or failing that, sufficient target spacing - can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:
  • People who use a mobile device where the touch screen is the primary mode of interaction;
  • People using mouse, stylus or touch input who have mobility impairments such as hand tremors;
  • People using a device in environments where they are exposed to shaking such as public transportation;
  • Mouse users who have difficulty with fine motor movements;
  • People who access a device using one hand;
  • People with large fingers, or who are operating the device with only a part of their finger or knuckle.

See Understanding Success Criterion 2.5.8: Target Size (Minimum) opens in a new window for more information, examples, and exceptions.

Rule Description

Touch targets must be at least 24 by 24 CSS pixels in size. Size is computed by taking the largest unobscured area of the touch target. If the size of the target is insufficient, then it must be possible to draw a virtual circle centered on the target with a diameter of 24 pixels that does not intersect any other targets, nor any of the circles on other undersized targets.

The Algorithm (in simple terms)

Check the unobscured size of the touch target and the distance to other touch targets.

Resources

Other Resources

You may also want to check out these other resources.

Refer to the complete list of axe 4.9 rules.

Was this information helpful?

You have already given your feedback, thank you..

Your response was as follows:

Was this information helpful?
Date/Time feedback was submitted: