For users with motor impairments, small targets can be nearly impossible to use accurately.
Target Size (Enhanced) ensures that interactive elements are big enough to be tapped or clicked accurately, helping everyone avoid accidental clicks and missed targets.
This defines the minimum as 44×44 pixels. Remember, the AA version 2.5.8 is 24×24, but we always 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: Users with limited dexterity benefit from larger targets, which are easier to hit accurately without needing precise movements.
- Touchscreen users: On smaller screens, larger targets improve usability and reduce accidental taps for everyone.
- All users: Larger, well-spaced targets make interactions smoother and reduce frustration from missed or mistaken clicks.
How to meet Target Size (Enhanced)
- Ensure targets are at least 44 by 44 CSS pixels: Design interactive elements to be large enough for easy tapping, reducing the likelihood of accidental taps or misses.
- Maintain spacing between targets: Avoid clustering interactive elements too close together, which can lead to accidental taps.
- Test on different devices: Check target sizes on phones, tablets, and desktops to confirm they’re easily clickable across screens and devices.
Practical example
Meowcation enhances usability by ensuring all interactive elements—like “Add to Itinerary”—are extra-large and easy to select, so planning your purr-fect trip is hassle-free.
Exceptions
Where space is extremely limited, such as in toolbars or complex UIs, smaller targets may be used. However, an increased target size is recommended whenever possible.
Top tips
- Prioritize common actions: Make frequently used or critical actions larger and easier to tap, reducing frustration.
- Avoid crowding targets: Keep adequate spacing between buttons, links, and other interactive elements. Dropdown menus really need this attention.
- Test usability on touchscreens: Check target size on mobile devices to ensure easy, accurate interaction.