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

About this Technique

This technique relates to 2.5.8: Target Size (Minimum) (Sufficient).

This technique applies to all technologies that support CSS and pointer input.

Description

The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 24 by 24 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.

Examples

The following example can be seen in the working example.

Example 1: Using a `display` value of `flex` with `min-height` and `min-width`

This example uses min-height and min-width on the list items containing the pagination links. The links don't meet the 24 by 24 CSS pixels size requirement, but centering the links inside containers that are at least 24 by 24 CSS pixels ensures sufficient spacing. The links' 24 CSS pixel diameter circles will each be completely within their containing list items, so they won't intersect each other.

A horizontal pagination component. Each page is represented by a square box containing a link labelled with the page number. The boxes are 24 by 24 CSS pixels, but only the numbers inside the boxes are links, not the boxes themselves; the actual links are smaller than 24 by 24 CSS pixels. — Example of using CSS to ensure enough spacing around targets

The HTML

<nav aria-label="pagination">
  <ol>
    <li><a class="previous">previous</a></li>
    <li><a aria-current="page">1</li>
    <li><a href="/page-2">2</a></li>
    <li><a href="/page-3">3</a></li>
    <li><a href="/page-4">4</a></li>
    <li><a href="/page-5">5</a></li>
    <li><a href="/pages-6-10">next</a></li>
  </ol>
</nav>

The CSS

ol {
  display: flex;
  flex-wrap: wrap;
}

li {
  min-height: 24px;
  min-width: 24px;
  text-align: center;
}

Tests

Procedure

For each undersized target that has no sufficiently large equivalent, that isn't in a sentence or otherwise constrained by the line-height of non-target text, that has had its size modified by the author, and whose presentation isn't essential:

Draw a 24px diameter circle centered on the target's bounding box.
Check that the circle from #1 does not intersect any other target.
Check that the circle from #1 does not intersect any other undersized target's circle.

Expected Results

#2 and #3 are true.