Pointer Targets That Meet WCAG Minimums

A website can look polished and still fail at the moment of action. Icons sit eight pixels apart. Text links in a footer stack tightly. On a phone, a thumb lands between two controls and activates the wrong one. The failure is not mysterious. Some people cannot reliably hit small targets that sit close together—especially users with limited dexterity or difficulty with fine motor movement.

WCAG 2.2 addresses that problem directly. Success Criterion 2.5.8 Target Size (Minimum), at Level AA, requires that the size of the target for pointer inputs be at least 24 by 24 CSS pixels, with defined exceptions. A stricter AAA criterion, 2.5.5 Target Size (Enhanced), raises the bar to 44 by 44 CSS pixels for many custom controls.

---

The problem targets are meant to solve

W3C’s Understanding document for SC 2.5.8 states the goal plainly: make controls easier to activate. The intent is to help ensure targets can be activated without accidentally activating an adjacent target. Sufficient size—or sufficient spacing between targets—reduces mis-taps and mis-clicks.

An analogy helps at the mechanism level. Imagine elevator buttons placed so close that two fit under one fingertip. The labels may be correct; the geometry still produces errors. Interface targets behave the same way when hit areas share a crowded neighborhood.

This is not only a “mobile” issue. Pointer inputs include fingers, styluses, and mice. Tremor, large cursors, touchscreens used with gloves, and imperfect motor control all raise the cost of tiny controls.

---

How the 24×24 minimum works

Under WCAG 2.2 SC 2.5.8, a conforming target is at least 24 by 24 CSS pixels. W3C clarifies what that means geometrically: it must be possible to draw a solid 24×24 CSS-pixel square, aligned to the axes, that lies completely inside the target.

If a control is smaller, it may still pass through the spacing exception: undersized targets are positioned so that if a 24 CSS-pixel diameter circle is centered on each target’s bounding box, those circles do not intersect another target or another undersized target’s circle. In other words, small controls need a clear personal space.

Other exceptions in the criterion include:

• Equivalent — the same function is available through a different control on the page that meets the criterion.
• Inline — the target is in a sentence, or its size is constrained by the line-height of surrounding non-target text.
• User agent control — the browser determines the size and the author has not modified it.
• Essential — a particular presentation is essential or legally required.

W3C’s guidance adds an important practical note: it is still possible to meet the criterion with very small targets if neighbors stay far enough away—but larger targets help more people. As a best practice, aim to meet the minimum size itself, not only the spacing workaround. For important links and controls, consider the stricter 2.5.5 enhanced size of 44×44 CSS pixels.

WCAG 2.2 itself is a W3C Recommendation dated 5 October 2023 (REC-WCAG22-20231005). Target Size (Minimum) is one of the criteria that distinguish 2.2 from earlier 2.1 baselines many teams still quote from memory.

---

What teams often get wrong

Pattern	Why it fails people	Better approach
Icon-only buttons at ~16px	Hit area smaller than a fingertip	Expand padding/hit area to ≥24×24 (prefer ≥44 for primary)
Footer link stacks	Adjacent text targets collide	Increase spacing or stack with clearer separation
“Looks big, hits small”	Visible glyph larger than clickable box	Make the interactive box match the visible affordance
Dense chip groups	Spacing exception fails under the 24px circle test	Rework layout density for touch

A limitation to keep explicit: passing SC 2.5.8 does not certify overall accessibility. Focus visibility, contrast, keyboard access, and labels remain separate requirements. Target size is one geometric gate in a larger operable interface.

---

Studio checks before launch

1. Inventory pointer targets — buttons, icon controls, nav items, pagination, tags, and close affordances.
2. Measure the interactive box, not only the visible SVG path.
3. Apply a 24×24 floor to custom controls; push primary actions toward 44×44 when layout allows.
4. If a control must stay small, verify the 24px-diameter spacing rule against neighbors.
5. Test with touch and mouse on actual devices, including one-handed mobile use.
6. Document exceptions (inline links, unmodified browser controls) so they are intentional, not accidental.

The next step after sizing is consistency: a site that meets the minimum on the homepage but crowds controls in the checkout or contact path still drops people at the moment that matters. Treat target geometry as part of the design system, not a late QA surprise.

---

What to do on your next build

1. Set component tokens for minimum hit areas in the UI kit.
2. Audit icon buttons and compact nav first—they fail most often.
3. Prefer size over spacing loopholes for anything tied to conversion or contact.
4. Re-check after responsive tightening, when desktop gaps collapse on small screens.

Pointer targets sound like a narrow detail. They are the difference between an interface that can be operated under real motor conditions and one that only works for precise cursor users on large monitors.

---

Ready to Discuss Your Website?

If you are planning a new website, a service redesign, or custom development for your business, we’re here to help shape the work.

• Explore Our Services: Web Design · Web Development · Website Redesign
• Start a Conversation: Tell us about your project via our Contact Form or email us directly at hello@windware.dev.