Understanding Target Size (Minimum)

Intent of Target Size (Minimum)

The intent of this Success Criterion is to ensure targets can easily be activated without accidentally activating an adjacent target. When targets are small, it is difficult for users with hand tremors and those who have difficulty with fine motor movement to activate them accurately. Providing sufficient size, or sufficient spacing between targets will reduce the likelihood of accidentally activating the wrong control.

This success criterion defines a minimum size, using larger sizes will help many people use targets more easily. Meeting 2.5.5 Target Size (Enhanced) is recommended whenever possible.

The requirement is for targets to be at least 24 CSS pixels in size, or for their size plus spacing be at least 24 CSS pixels. The targets offset is the size plus spacing between targets, measured from the farthest point of the target to the nearest point of each adjacent target. For example, a target of 20 by 20 CSS pixels would meet the requirement if it had a spacing of 4 px to any adjacent target. If the target is 24 by 24 CSS pixels or larger, no spacing between it and adjacent targets would be required.

There are three exceptions:

1. If a target is smaller than 24 by 24 CSS pixels but has sufficient spacing, it passes. The spacing is sufficient if the offset between the farthest edge of the target to the nearest edge of any neighboring target is 24 CSS pixels or greater. What edge of the target is farthest depends on the position of the neighboring target to which the offset is established. For example, if the neighboring target is above it, the farthest edge would be the bottom of the target, and the offset would be measured form this bottom edge to the bottom edge of the neighboring target above.
2. The Success Criterion does not apply to inline targets in blocks of text – for example, text links inside a sentence or paragraph. When multiple links are embedded in blocks of texts in smaller text sizes, maintaining a 24 CSS pixels offset between links in adjacent lines of text would require a large line height which can be undesirable in many design contexts. Also, inline links such as footnote numbers common in scientific texts may sometimes have a width of well below 24 CSS pixels. Placed in a sequence, these links often have a horizontal offset of less than 24 CSS pixels. Stacked lists of links, as in navigation structures, do not count as inline links.
3. If the spacing of the targets is essential to the information being conveyed, the "Essential" exception applies. For example, in digital maps, the position of pins is analog to the position of places shown on the map. If there are many pins close together, the offset between pins and neighboring pins will often be below 24 CSS pixels. It is essential to show the pins at the correct map location, therefore the Essential exception applies.

The requirement is independent of the zoom factor of the page; when users zoom in the CSS pixel size of elements does not change. This means that authors cannot meet it by claiming that the target will have enough spacing or sufficient size if the user zooms into the page.

While the Success Criterion primarily helps touch users by ensuring that activation with the 'fat finger' will not accidentally trigger adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to a tremor or some other input imprecision.

As mobile devices generally have internal heuristics to identify which link is closest, spacing can work as effectively as a larger target size.

Users with different disabilities have different needs for control sizes. It can be beneficial to provide an option to increase the active target area without increasing the visible target size. Another option is to provide a mechanism to control the density of layout and thereby change target size or spacing, or both. This can be beneficial for a wide range of users. For example, users with visual field loss may prefer a more condensed layout with smaller sized controls while users with other forms of low vision may prefer large controls.

Benefits of Target Size (Minimum)

Having targets with sufficient size - or failing that, sufficient target spacing - can help all users who may have difficulty in confidently targeting or operating small controls. Users who benefit include, but are not limited to:

• People who use a mobile device where the touch screen is the primary mode of interaction;
• People using mouse, stylus or touch input who have mobility impairments such as hand tremors;
• People using a device in environments where they are exposed to shaking such as public transportation;
• Mouse users who have difficulty with fine motor movements;
• People who access a device using one hand;
• People with large fingers, or who are operating the device with only a part of their finger or knuckle.

Examples of Target Size (Minimum)

• Three buttons are on-screen and the target area of each button is 24 by 24 CSS pixels. Since the target size itself is 24 by 24 CSS pixels, no additional spacing is required, the Success Criterion passes.
• A row of buttons, each of which has a horizontal width of more than 24 CSS pixels, but a height of only 20 CSS pixels. Since there is sufficient spacing above and below the row of buttons, the Success Criterion passes.
• Links within a paragraph of text have varying target dimensions. Links within paragraphs of text do not need to meet the 24 by 24 CSS pixels requirements, so the Success Criterion passes.

Resources

• Target size study for one-handed thumb use on small touchscreen devices

Techniques for Target Size (Minimum)