2.5.8
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
- Equivalent: The function can be achieved through a different control on the same page that meets this criterion;
- Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
- User agent control: The size of the target is determined by the user agent and is not modified by the author;
- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
When there are interactive elements (targets) that can be used with a pointer.
If content is hidden but can be shown (for example within a menu), you will need to make sure to include it in your testing.
Check targets are at least 24 pixels wide and 24 pixels high.
For any smaller targets, check that the centres of all targets are at least 24 pixels away from each other.
If the space between smaller targets is not obvious, a way to check precisely is to:
- draw rectangles just big enough to contain each element
- draw 24 pixel diameter circles at the centres of those rectangles
- check that there is no overlap between those circles
You can also try the following methods.
The Target Size Bookmarklet from Steve Faulkner helps to quickly identify visually whether a component is likely to overlap with another component. It shows a green circle with a darker green border for any targets that are at least 24 by 24 pixels, and a purple circle for any smaller targets. Where any circles overlap, and none of the exemptions apply, the success criterion fails.
An alternative that does not rely on colour to communicate results is the 24x24 circle cursor bookmarklet from Adrian Roselli. This method is more manual.
- Use the select tool in your browser's inspector to help identify the dimensions and spacing of each element. For example, in Chrome, this is the arrow icon at the top of the DevTools window.
- Measure the spacing by taking a screenshot at 100% zoom and checking the distance between the centre of adjacent components in an image editing application.
- A further alternative is the Web Developer toolbar, which includes a ruler and other tools: open the toolbar and select Miscellaneous > Display Ruler.
It's not a fail if:
- there's an equivalent control elsewhere which meets this criterion
- two areas overlap but carry out the same function - they should be considered as the same target and pass this criterion (for example, a checkbox and its label would count as a single target)
- the target is within text (not counting punctuation)
- the target size is set by the browser
- the target size is essential, for example interactive data points in a graph
- there is a single input where the value changes depending on how you interact with it, like a gradient colour picker or slider (
<input type="range">)
- Each target should be at least 24 pixels wide and 24 pixels high, regardless of spacing.
- Increase the target to at least 44 pixels wide and 44 pixels high to pass level AAA; see W3C's 'Understanding 2.5.5 Target Size (Enhanced) (Level AAA)'
- Increase the target to at least 48 pixels wide and 48 pixels high to pass Android's Touch target size guidelines.
There are different ways you can test target size on mobile apps.
On Android, target sizes can be tested using the accessibility scanner, which detects elements below 48x48 pixels (dp). If an element's size is smaller than this then it will mention the dimensions.
If you need to check sizes manually, you can also:
- take screenshots and review the images on a desktop, using an image editing application
- use accessibility inspector tools such as Xcode or Android Studio - 24 CSS pixels is roughly the same as the equivalent device units (24pt on iOS and 24dp on Android)
Be careful when using screenshots: pixel density varies on mobile devices, so the number of pixels in a screenshot may not match the number of pixels on screen.
You will need to take into account the pixel density in order to match the number of pixels on screen with the number of device pixels. Look up the dimensions of your device to work out the ratio you need to zoom to. For Apple devices you can refer to the Apple Layout Guidelines.
If the target size cannot be detected using software then the physical screen can be measured as follows:
- based on Android's Touch target size guidelines, 24 pixels is around 4.5mm, regardless of screen size
- on an iPhone 11, 24pt is around 3.75mm - if you're using a different iOS device, you will need to use Apple's Layout Guidelines to work out how many pixels there are per centimetre
No horizontal separation between targets is required in this Success Criteria
As each target is in 24px of space horizontally and vertically, this design conforms with the Success Criteria
Links require at least 24px separation vertically and horizontally unless they are part of text.
