The problem
Many controls — icons, toggles, menu dots — are visually compact, but the hit area for touch (and mouse) needs to be bigger. Small buttons frustrate everyone, especially on mobile, and make it harder for people with motor challenges to use your app.
Why it matters
- Touch usability: Thumbs are big; controls need room. Tiny touch targets frustrate all users, especially on phones.
- Accessibility: People with mobility or dexterity challenges are most impacted.
- Keyboard too: A larger hit/focus area helps keyboard users hit targets easily. The focus ring should be clearly visible (never disable it!).
- Screen readers: Icon-only controls need an accessible name (use
aria-label).
Checklist for touch targets
- Minimum 44×44px hit area (WCAG / iOS / Android guidelines)
- Always provide space between controls, not just overall size
- Use a real
<button>, link, or control element — never a plain<div> - Every icon-only control must have an accessible label (
aria-labelor<span class="sr-only">text) - Don’t remove focus outlines (keyboard users depend on them)
- Never rely on hover-only tooltips to convey name or purpose
Common pitfalls
- Only increasing icon size: The hit area (not just the UI) needs to be large enough.
- Spacing too tight: Make sure there’s enough gap between controls to avoid accidental taps.
- Clickable non-buttons: Don’t use a styled
<div>for actions. Use semantically correct controls. - Focus indicator removed: Don’t override the outline. Keyboard users need visible focus.
- No accessible label: Every icon-only control must be announced clearly to screen readers.
Quick test
- Can you tap the control easily with your thumb? Try on a real phone.
- Can you reach it with Tab and activate with Space or Enter?
- If it’s an icon-only button, does a screen reader announce what it does?