Understanding Pointer Target Spacing

Intent of Pointer Target Spacing

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 spacing between targets will reduce the likelihood of accidentally activating the wrong control.

The requirement is for targets to have at least 24 px offset between them. The offset between targets is the size plus spacing of a target, measured from the nearest point of each adjacent target to the farthest point of the current target. For example, a target of 20 x 20px would meet the requirement if it had a spacing of 2 px on all sides. If the target is 24 x 24px or larger, no spacing between it and adjacent targets would be required.

There are four exceptions:

1. If the target is inline within a sentence there doesn’t need to be a minimum target size.
2. If the size or spacing of targets is determined by the user agent and is not modified by the author.
3. If one target is entirely enclosed within another target, each target needs to provide a unique target area of at least 24 by 24 CSS pixels.
4. If the spacing of the targets is essential to the information being conveyed there doesn’t need to be a minimum target size.

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.

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.

The requirement does not apply to the spacing of targets inside unstyled native elements. For example, when a default select element is used, the vertical spacing of option elements inside the selects dropdown list is exempt.

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.

Where targets are embedded inside other targets, the inner target either needs a size of at least 44 x 44 CSS pixels or must be placed at the edge or corner to make sure that there is sufficient adjacent spacing in each dimension.

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.

Where user-agents control the size of a target, such as the options in a select drop-down, and the author has not changed the size of target with size or padding adjustments, the target is exempted from this criterion. It would be beneficial for users if the minimum size & spacing requirement is met, but where the user-agent has defined the target it is not the authors responsibility.

Benefits of Pointer Target Spacing

Having targets with 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:

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

Examples of Pointer Target Spacing

• 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 x 24 px, no additional spacing is required, the Success Criterion passes.
• A row of buttons, each of which has a horizontal width of more than 50px, but a height of only 20 px. 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 Pointer Target Spacing