This understanding document is part of the draft WCAG 2.2 content. It may change or be removed before the final WCAG 2.2 is published.
Target Size (Minimum)
AA
New
Targets have an area of at least 24 by 24 CSS pixels, except where:
- Spacing: The target offset is at least 24 CSS pixels to every adjacent target;
- Inline: The target is in a sentence or block of text;
- Necessary: A particular presentation of the target is essential or is legally required for the information being conveyed;
- Legal: A particular presentation of the target is legally required.
Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the Success Criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
Are there issues with internationalization when describing inline links?
Are there issues with pop-over content overlapping targets triggering failures?
- target offset
New
the distance measured from the farthest point of a target, to the nearest point of the second target. Offset includes the target and spacing around the target. The offset from A to B may be different then the offset from B to A, if the size of these targets differs.
The intent of this Success Criterion is to help ensure targets can be easily 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 by 24 CSS pixels in size. There are three exceptions:
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 providing target sizing to prevent accidental triggering of adjacent targets, it is also useful for mouse or pen users. It reduces the chances of erroneous activation due to either a tremor or reduced precision, whether because of reduced fine motor control or input imprecision.
Spacing, alone and in conjunction with size, can improve user experience. There is less chance of accidentally activating a neighboring target if a target is not immediately adjacent to another. Touchscreen devices and user agents generally have internal heuristics to identify which link or control is closest to a user's touch interaction - this means that sufficient spacing around a target can work as effectively as a larger target size itself.
The following illustrate a variety of situations using size and spacing of targets. In the top line of icons, the dimensions of each icon target are 44 by 44 CSS pixels with no space in between. This amply passes this Success Criterion and is actually sufficient to meet the AAA requirement for Target Size (Enhanced). In the next row, the dimensions of each icon target are 24 by 24 CSS pixels with no space in between, passing this Success Criterion. In the third row, the the same icon targets are only 20 by 20 CSS pixels but they have a 4 CSS pixel space in between, passing this Success Criterion via the spacing exception. In the last row, the the same icon targets are only 20 by 20 CSS pixels and have no space in between, failing this Success Criterion.
When targets are not 24 by 24 CSS pixels, it is still possible to meet this Success Criterion. The next two illustrations show sets of buttons which are only 20 CSS pixels tall. In the first set, there are no targets immediately above or below the buttons, so they pass. In the second illustration, the buttons have been stacked on top of one another, resulting in a fail.
The following two illustrations show how menu items can be adjusted to properly meet this requirement. In the first illustration, the About us
menu has been activated, showing that each of the menu item targets (text and padding) has a 24 CSS pixel height. In the second illustration, the same menu is expanded, but the menu items only achieve 20 CSS pixels in height.
The following three examples illustrate how a target's position relative to another target affects the offset. Each illustration shows a person's profile image, which is a target leading to the profile page, as well as a magnifying glass icon, which opens a lightbox view of the profile image. In the first example, the magnifying icon is outside of the picture. Its horizontal dimension is 24 CSS pixels. The vertical dimension is below 24 CSS pixels but since there are no adjacent targets above and below, the target meets the Success Criterion. In the second example, the icon overlaps with the top-left corner of the image. The image, itself a target, is immediately adjacent to the magnifying glass icon. Measuring from the top of the magnifying glass icon to the nearest point of the image target shows that that the offset is only 20 CSS pixels. The second example therefore fails the Success Criterion. In the third example, the magnifying glass icon sits inside the linked image. Since it is surrounded by a larger target, the offset to the surrounding and immediately adjacent image target is only 20 CSS pixels at top and bottom. The icon target fails.
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.
The aim of this Success Criterion is that targets are ideally at least 24 by 24 CSS pixels. However, the offset exception allows for smaller targets if there is sufficient spacing around them. Authors should be aware that using smaller targets can have an impact on layouts, as the combined space of the smaller target and the required spacing around it will generally require an overall area that is larger than 24 by 24 CSS pixels, the smaller the actual target is.
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: