What are Touch Targets?
A touch target is an interactive element on a screen that the user clicks with a mouse or taps with their finger. For example, buttons, links, icons, or form fields all have touch targets because you can click and interact with them.
It’s important for elements to have enough touch target in order for all users to click with ease. When these targets are too small they become a significant barrier to navigation, leading to "mismatched" taps and user frustration. For all users, small touch targets can make a website difficult or even impossible to use. Designing
Who Benefits from Larger Touch Targets?
An easy-to-navigate UI benefits everyone. Larger touch targets can benefit everyone and make websites easy to use for all users. Larger touch targets can ensure websites are accessible to all users. Some specific users a larger touch target can significantly help are:
- Users with Motor Impairments:
- Individuals with conditions like Parkinson’s disease, cerebral palsy, or arthritis may experience limited fine motor control, making precise tapping difficult. Larger touch targets will reduce the rate of error and the need for precise tapping. This in return will make websites easier to use.
- Users with Visual Impairments:
- Those with low vision may struggle to see the exact boundaries of a button. Larger targets make interactive elements easier to locate and activate.
- Mobile Users:
- Mobile screens are small and provide unique challenges as opposed to websites. Larger targets accommodate areas where the surface area of a thumb is larger than the digital element.
- Situational Disabilities:
- Accessibility isn't always about permanent conditions. Think about using your phone while wearing gloves or riding a bumpy bus. Larger touch targets will ensure all users can click and interact with elements easier.
WCAG standard for Touch Targets
To ensure your interface is truly accessible, you should design and implement touch targets according to criteria set by WCAG, Web Content Accessibility Guidelines. WCAG provides the global benchmark for digital inclusion.
- Level AA:
- Touch targets must be at least 24x24 CSS pixels or there must be at least 24 pixels of space between targets.
- Level AAA:
- At least 44x44 CSS pixels. The higher standard provide even more comfortable and forgiving interactions.
HTML / CSS Example
Below is an example of ensuring an icon with enough touch target. Even though the icon is small, the button itself meets touch target size requirements. We created a new style called icon-style and gave minimum width and height. We used this style on our icon to ensure enough touch targets were implemented for the icon.
HTML:
<button class="icon-style">
<img src="like.svg" alt="Like">
</button>CSS:
.icon-style {
width: 48px;
height: 48px;
padding: 12px;
background: none;
border: none;
}Conclusion
It’s important for elements to have enough touch target in order for all users to click with ease. When these targets are too small they become a significant barrier to navigation. For all users, small touch targets can make a website difficult or even impossible to use.
Accessibility is more than just avoiding errors; it’s about inclusion. Designing for accessibility creates better products for everyone.