All elements must have a clickable target size of at least 24x24 pixels unless the element is inline, controlled by the browser, or the "target offset" to all adjacent clickable elements is at least 24px.

WCAG 2 criterion

2.5.8 Target Size (Minimum) (Level AA)

Tools and requirements

• Manual Assessment (for now).
• Note: This can (and should) theoretically be automatically tested for, but no testing agents support this feature yet.

Test procedure
Note: This is a complex criterion. Please refer to the official WCAG 2.2 Documentation for details. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

The minimum target size (the minimum size of the clickable area) of all interactive elements must be at least 24 x 24 pixels with exceptions.

Test in the following order, and if an element passes any of the tests (labeled as 1, 2, and 3 below), the element passes this success criterion. If the element fails all exceptions and requirements, the element fails the success criterion.

1. If the element's target area can fit a 24x24 square of pixels within it, it passes.

   1. Pass example 1 - The target elements are already at least 24x24px in size.
      ![Three squares orthogonally adjacent to each other which are labeled as being 24 pixels by 24 pixels in size.][image-removed]
      Figure 70.1 - All elements meet the minimum 24x24 size.
   2. Pass example 2 - A target area fits a 24x24px square wholly within it.
      ![An oblique parallelogram with a uniform square labeled as being 24 pixels by 24 pixels wholly contained in the center.][image-removed]
      Figure 70.2 - A uniform 24x24 square that is completely contained within the target area.

2. Minimum spacing - if the element is sized such that you cannot wholly fit a 24x24 square within it, if you can draw a 24px diameter circle in the center of the element and not intersect another interactive element's minimum target size, it passes.

   The following examples are not exhaustive. Read the WCAG 2.2 Documentation for all details. https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

   1. W3C Example of pass and fail scenarios of adjacent icon elements.

      Top-row elements pass because they are already 24x24 on their own.

      Middle-row elements pass because the 20x20px elements are spaced far enough apart that a 24px circle centered on the elements will not intersect another 24px circle on an adjacent element.

      Bottom-row elements fail because the 20x20px elements are too close and a 24px circle centered on each element will intersect an adjacent element's 24px circle.
      ![][image-removed]
      Figure 70.3 - Passing and Failing examples showcasing how to evaluate adjacent links using a circle's diameter if the target links are smaller than the minimum 24x24px.

   2. W3C Example of passing and failing elements with adjacent buttons.

      The top row passes because there are no elements that intersect a centered 24px circle on each target.

      The bottom row fails because elements DO intersect the centered 24px circle
      ![][image-removed]
      Figure 70.4 -
      ![][image-removed]

   3. W3C Example of passing and failing dropdown navigation.

      The passing option features a minimum 24px of height for each element.

      The failing option has other navigation elements within the circle diameter.
      ![][image-removed]

3. If the target element fails both the minimum target size and minimum spacing checks - the following exceptions may also allow the element to pass.

   1. The functionality of the failing element can be achieved via an alternative control that passes.
   2. The element is inline (such as an inline link).
   3. The size of the target is fully controlled by the user agent and NOT user modified with CSS or otherwise.
   4. The presentation of an element is essential (the element MUST be presented the way it is, and there is no other way to perform the functionality).

AI Prompt