WCAG 2.5.8: Target Size (Minimum)

How to

• The clickable area is at least 24 × 24 pixels

  Interactive elements should have a clickable or tappable area of at least 24 × 24 CSS pixels.

  For clickable icons, the icon itself may be smaller (e.g., 18 × 18 pixels), as long as the invisible hit area is at least 24 × 24 pixels.

  Recommendation: Wherever possible, significantly larger hit areas should be used. Apple and Android themselves recommend 44 px and 48 px respectively as the smallest practical sizes for mobile.

  Technique(s):

  • C42: Using min-height and min-width on target container to ensure sufficient target spacing
  

• Spacing to adjacent controls

  A control may be smaller than 24 × 24 pixels as long as there is no overlap with other interactive hit areas within a 24-pixel radius. This is to prevent users from accidentally hitting the wrong target.

  Technique(s):

  • C42: Using min-height and min-width on target container to ensure sufficient target spacing
  

Notes

• Exception: An alternative of the required size is available

  A control does not need to meet the minimum size requirements if there is a second control elsewhere on the page that performs the same function and does meet the minimum requirements.

  

• Exception: Inline links in body text

  Links inside paragraphs are exempt from this criterion because the height of the links often depends on the height of the surrounding body text.

  

• Exception: Element provided by the user agent (browser/OS)

  Elements that come from the browser itself are also exempt, because you have very little influence over them.

  A good example is the native HTML date picker, which often has tiny buttons. (Admittedly, it also has an accessible alternative through the input field, which is large enough!)