Ensure that the target sizes are large enough for users to activate them. This will help users with disabilities to access content even if it is a small handheld touch screen device, has limited dexterity, or has trouble activating small targets for other reasons
Table of Contents
Official Requirements
Success Criterion 2.5.5 Target Size (Level AAA): The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
Equivalent
The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
Inline
The target is in a sentence or block of 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 to the information being conveyed.
Why is it required?
Users with motor impairments find it difficult to activate interactive elements such as buttons if its target size is not large enough. This might happen due to hand tremors, difficulty with motor movements, etc. Furthermore, users with low vision and small handheld touch screen devices, are also benefited from maintaining the target size for pointer inputs at least 44 by 44 CSS pixels.
How do we fix it?
- Make sure that all touch targets meet the resolution criteria of 44 by 44 CSS pixels
- Provide an option to change target size that is independent of the magnification function
- Use standard interface controls wherever possible
Are there any exceptions?
There are four exceptions to this success criteria:
- If there is an equivalent link or control on the same page that satisfies the target size resolution ie 44 by 44 CSS pixels
- If the target is in a sentence or block of text
- If the target size is determined by the user agent and is not modified by the author
- When the target is considered an essential
Mistakes to avoid
- The target size is less than 44 by 44 CSS pixels
- The target size of a paragraph that is also a link is less than 44 by 44 CSS pixels.
