Target Size (Minimum) ensures that interactive elements are big enough to be tapped or clicked accurately, helping everyone avoid accidental clicks and missed targets.
This defines the absolute minimum of 24×24 pixels. The AAA version 2.5.5 is 44×44, and we recommend that you aim for larger target sizes because no one ever complained a button was too easy to tap.
Who this impacts
- People with motor impairments: Larger targets make it easier for users who may struggle with precise movements to tap or click accurately.
- Touchscreen users: On smaller screens, well-sized targets improve usability and reduce the likelihood of tapping the wrong item.
- All users: Increasing target size improves overall usability, making interactions smoother and more accessible for everyone.
How to meet Target Size (Minimum)
- Use a minimum target size of 24×24 CSS pixels: Ensure that all interactive elements are at least this size to make them easy to tap or click.
- Separate closely placed targets: Avoid crowding interactive elements so users don’t accidentally tap the wrong target. Remember that this applies to dropdown menus, too.
- Test usability on touch devices: Check target size on mobile and tablet screens to confirm accessibility across different devices.
Practical example
Catbook’s “Post an Update” button exceeds the minimum size requirements, ensuring users can easily share their latest feline adventures, even on smaller screens.
Exceptions
In dense layouts, such as toolbars or close proximity icons, smaller targets may be used if necessary. However, the recommended size is preferred whenever possible.
Top tips
- Make common actions easy to tap: Ensure that frequently used buttons are well-sized to prevent user frustration.
- Avoid overcrowding: Keep adequate spacing between buttons and links to prevent accidental clicks.
- Verify on small screens: Test your app or website on mobile devices to ensure targets are easy to interact with across screen sizes.