Singapore UX critiques: measure pointer targets and spacing

The problem

A designer preparing for a Singapore accessibility critique sees a small icon but cannot establish whether its active pointer region is too small, sufficiently spaced or larger than the artwork.

Measure the active region before judging the icon

A small icon does not establish a small pointer target. Begin with the region that actually accepts a mouse, pen or touch action, then examine its size and surroundings. WCAG 2.2 Success Criterion 2.5.8 sets a minimum of 24 by 24 CSS pixels for pointer targets, subject to five exceptions. W3C's Understanding explanation develops the size and spacing conditions. Use that question to prepare for a Singapore UX or accessibility critique: which region is active, what geometry does it have, and which requirement or exception applies? Keyboard focus, text readability and successful task completion need their own observations. This guide supplies a focused comparison rather than a verdict on every control or the service.

• W3C: Understanding WCAG 2.2 Target Size (Minimum) ↗ · Source checked 21 October 2026

Find the actual shape and CSS-pixel dimensions

Choose a permitted working example with invented inputs and identify one control in a specific state. Establish the area accepting the action through the implementation or an appropriate inspection agreed for the exercise. An icon's width, a decorative background and a screenshot's apparent border need not reveal that area. Record what supports your measurement; if only artwork is available, label the active region unknown and treat a proposed hit area as a proposal. For the size requirement, a solid 24 by 24 CSS-pixel square aligned with the page must fit inside the target. A bounding box that is 24 by 24 is insufficient when the actual rounded or irregular shape cannot contain that square. CSS pixels differ from display hardware pixels, and browser zoom does not change the criterion's CSS-pixel requirement.

• W3C: Understanding WCAG 2.2 Target Size (Minimum) ↗ · Source checked 21 October 2026

Keep a per-control size and neighbor record

Use these entries: interface version and state; control function; established active shape and CSS-pixel dimensions; whether the required square fits; nearby target positions; applicable exception and its reason; and evidence still missing. For an undersized target examined through spacing, center an imaginary 24 CSS-pixel-diameter circle on its minimum bounding box. Check that circle against another target and against circles for other undersized targets. Include neighbors above, below and diagonally, not only the next icon in the row. A small control beside a much larger target still needs that comparison with the larger target itself. Retain the measured input and source of each dimension so the critique can reproduce the geometry rather than debate the icon's appearance.

• W3C: Understanding WCAG 2.2 Target Size (Minimum) ↗ · Source checked 21 October 2026

Compare three wholly fictional control arrangements

These are stipulated rectangular active regions, with no real interface or executed test. First, a 16 by 16 icon sits inside a fully active 28 by 28 rectangular button. The active rectangle contains a 24 by 24 square; measuring only the icon would answer the wrong question. Second, two 20 by 20 active rectangles touch in a horizontal row. Their centers are 20 CSS pixels apart, so the two 24-pixel-diameter spacing circles overlap. The size condition is unmet, and this arrangement does not satisfy the spacing exception. Third, place the same rectangles eight CSS pixels apart, with no other targets nearby in any direction. Their centers are 28 pixels apart; the circles meet neither each other nor the other rectangle. This stipulated geometry satisfies the spacing exception while the rectangles remain undersized. No user activation, comprehension or real product result has been observed. Larger targets can still be helpful even when a spacing exception applies.

• W3C: Understanding WCAG 2.2 Target Size (Minimum) ↗ · Source checked 21 October 2026

Check the applicable exception instead of forcing one repair

The spacing exception is one option, not a rule that every small control needs an invisible pad. The equivalent exception concerns another control on the same page that achieves the function and meets this criterion. The inline exception concerns targets in sentences or constrained by the line-height of non-target text; it does not exempt every link wherever it appears. The user-agent-control exception concerns size determined by the user agent and unmodified by the author. Essential presentation or a legal requirement can supply the essential exception under its actual conditions. Record the supporting reason rather than writing 'exception' because enlarging the control is inconvenient. For an actual uncertain case, bring the precise presentation and applicable source explanation to the review. This guide makes no legal determination and prescribes no universal control density.

• W3C: Understanding WCAG 2.2 Target Size (Minimum) ↗ · Source checked 21 October 2026

Choose a critique that can examine the active area

Prepare the control state, established measurements, neighbor record and one unresolved question. Ask whether the advertised activity can examine a working interface or a clearly scoped implementation proposal. A static visual review can discuss a proposed area while leaving the implemented pointer region unverified. An illustrative enquiry is: 'I want to distinguish the icon from its active area and compare an undersized target with nearby controls. Does the critique inspect that geometry, and what permitted example and setup should I prepare?' Confirm the actual participant activity and accepted material. Use the keyboard-path companion for focus visibility and activation, and the reflow companion when a narrowed layout changes available content or control arrangement. A relevant event title does not allocate individual testing.

• Examine focus location and keyboard activation separately →
• Record reflow at the relevant CSS viewport →

Keep the measured finding separate from task success

After an actual permitted review, retain the original region, criterion or exception examined, changed geometry if supplied, and observation still missing. A useful note might say that a proposed rectangle contains the required square while the working implementation remains uninspected. In the fictional spaced pair, only the stipulated size-and-spacing question is settled; it supplies no task-completion or whole-page conformance result. Recheck changed layouts and neighboring targets under their actual states rather than carrying one row's result to another screen. Use Boardzip's free accessibility search to find candidate sessions, then verify the programme, preparation and joining terms. If no verified listing offers the required inspection, keep the measurement question and official resource ready for a suitable opportunity.