A small icon can be easy to see and still be hard to activate. The visible mark and the clickable area are different parts of a control. When a row of tiny actions sits close together, the question is not simply whether the icons look large enough in a screenshot. It is whether a person using a pointer can reliably activate the intended target.
Measure the target, then inspect its neighbors
WCAG 2.2 Target Size (Minimum) sets a 24 by 24 CSS pixel threshold for pointer targets, with specific exceptions. One exception concerns spacing around undersized targets. A design review therefore needs to inspect the actual clickable bounds and nearby controls, not just the dimensions of an SVG or PNG. A 16-pixel icon can sit inside a larger button; a 32-pixel icon can also be inside a smaller interactive region if the markup and CSS are wrong.
Consider an actions column with edit, duplicate, and delete buttons. First identify the element receiving the click. Measure its target area in CSS pixels at the relevant viewport. Then check whether adjacent targets satisfy the spacing condition if any are undersized. Repeat on touch-sized layouts, where a desktop row may wrap or compress. Avoid increasing the icon alone when the actual button box remains unchanged.
Repair the interaction, not its screenshot
The right change might be padding the control, separating neighboring buttons, or restructuring the row so each action has a distinct target. Make sure the focus indicator still fits and remains visible after a sizing change. A larger target should not cover or intercept an adjacent action. Test the result in the rendered page, including keyboard and pointer use.
A website accessibility target size repair is one example of a specific element-level change to review and verify. Automated checks can help locate candidates, but the final judgment depends on the real target geometry, spacing, exceptions, and behavior on the live interface.
Top comments (0)