Interactive elements must have an area of at least 24 by 24 pixels

Description

Rule ID: target-size-minimum

This rule determines if the interactive element has an area of at least 24 by 24 pixels.

How to fix it

To address WCAG 2.5.8, which focuses on ensuring that interactive targets can be easily activated by pointer users without accidentally hitting an adjacent target, several strategies can be employed. These strategies aim to enhance usability for users with limited mobility, such as those experiencing hand tremors or quadriplegia, as well as accommodate the imprecision of virtual pointing devices and touchscreens, and assist users with low vision.

Key points to consider

  • Minimum target size: the minimum size for a target for pointer inputs should be at least 24 by 24 CSS pixels. This ensures that the target is large enough to be easily interacted with, reducing the risk of accidental activation of nearby targets.
  • Exceptions: there are exceptions to the minimum target size rule under certain conditions:
    • Spacing: undersized targets should be 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 control: If the function can be achieved through a different control on the same page that meets the criterion, it is acceptable.
    • Inline targets: if the target is in a sentence or its size is otherwise constrained by the line-height of non-target text, it may not meet the minimum size but is still considered accessible.
    • User agent control: the size of the target is determined by the user agent and is not modified by the author.
    • Essential presentation: a particular presentation of the target is essential or is legally required for the information being conveyed.