Using min-height and min-width to ensure sufficient target spacing

Applicability

Any technology that supports pointer input (e.g. supporting any or all of the following: mouse pointer, touch on touch screen or trackpad, stylus input, or laser pointer input).

This technique relates to proposed Success Criterion 2.5.X: Target spacing.

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 44 x 44 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.

Example 1 (display: inline-block, min-height: 44px and min-width: 44px set on list items inside pagination menu)

The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.

Search results (garbage):

  1. Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good

    HarperCollins, 1800. Condition: Good.

  2. Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)

    Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.

  3. Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01)

    1838. Condition: Very Good. Published by Belmont Books, 1969.

Example 2 (display: flex, min-height: 44px and min-width: 44px set on links inside pagination menu)

The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.

Search results (garbage):

  1. Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good

    HarperCollins, 1800. Condition: Good.

  2. Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)

    Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.

  3. Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01)

    1838. Condition: Very Good. Published by Belmont Books, 1969.

Tests

Procedure

For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:

Expected Results


Detlev Fischer, (fischer [ at ] dias [dot] de)

Last update: 16 May 2020