Target Size
Target size is the full area a person can click or tap to use a control. It may be larger than the visible icon.
Another example
In a medicine app, each small reminder icon sits inside a 32-by-32 CSS-pixel button. Space between buttons prevents wrong taps. At 200% zoom, controls move instead of overlapping, and dense map pins also have a list.
Main parts
- 01Visible control
- 02Interactive hit area
- 03Separation from neighbors
Use it when
Make pointer targets at least 24 by 24 CSS pixels, or leave enough space around them. Test touch, zoom, and different movement needs.
Do not use it when
Do not judge only the visible icon. The full hit area, spacing, inline exception, and another usable path all matter.
Name used in code
minimum 24×24 CSS px target or sufficient spacing under WCAG 2.5.8 Before you ship
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Use Target Size to solve this user need without losing the current context. User context: In a medicine app, each small reminder icon sits inside a 32-by-32 CSS-pixel button. Space between buttons prevents wrong taps. At 200% zoom, controls move instead of overlapping, and dense map pins also have a list. Recommended pattern: Target Size. Why it fits: Make pointer targets at least 24 by 24 CSS pixels, or leave enough space around them. Test touch, zoom, and different movement needs. Do not use it when: Do not judge only the visible icon. The full hit area, spacing, inline exception, and another usable path all matter. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): The standard covers only the listed scope. It does not choose the visual style, product decision, or Vibulary example. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Check this request
Review the current use of Target Size. Definition: Target size is the full area a person can click or tap to use a control. It may be larger than the visible icon. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.