Target Size
Definition
A control's target is the whole region that responds to a pointer, not just the part that looks like a button. WCAG 2.2, published on 5 October 2023, added 2.5.8 Target Size (Minimum) at level AA: each pointer target must be at least 24 by 24 CSS pixels unless one of five exceptions applies. Those exceptions are spacing, where a 24-pixel-diameter circle centred on the target does not overlap any other target's circle; an equivalent control of sufficient size elsewhere on the page; targets inline within a sentence or block of text; user-agent default styling the author has not changed; and presentation that is essential, such as a point on a map. The older 2.5.5 Target Size (Enhanced), carried over from WCAG 2.1, sets 44 by 44 CSS pixels at level AAA. Platform guidance runs higher still — Apple recommends 44 by 44 points and Material Design 48 by 48 density-independent pixels — because a fingertip contact patch is roughly 8 to 10 millimetres across.
Why It Matters
Small targets fail people with tremor, limited fine motor control, arthritis or a phone in one hand on a moving bus, and the failure mode is not a missed tap but the wrong tap. A 16-pixel close icon sitting 4 pixels from a delete control means that missing the first one triggers the second. There is a measurable cost even for users with no impairment: Fitts's law says acquisition time grows as the target shrinks, so every row of 14-pixel icons slows everyone down. Because the AA threshold is 24 by 24, the fix is usually padding rather than redesign, and padding on an anchor or button counts toward the measurement — a 16-pixel icon with 8 pixels of padding on each side already clears it at 32.
How It Works
Measure the element's bounding box as the browser renders it, including padding but not margin, then compare against 24 by 24 CSS pixels. Add padding to the interactive element itself rather than wrapping it in a larger container, because only the element that handles the click counts. Where a layout genuinely cannot give the room, lean on the spacing exception: keep at least 24 pixels between the centres of adjacent targets so a near miss lands on nothing instead of on the neighbour. Inline links inside a paragraph are exempt, which is why a text link at normal line height does not fail, but a row of icon-only links in a footer is not a sentence and does not get that exemption. Responsive design helps here too, since the same padding that makes a nav item comfortable on a phone usually satisfies the criterion on a desktop. A browser's element inspector prints the computed box, so checking a suspect control takes seconds.
Real-World Example
A photographer publishes a gallery at studio-portfolio.99helpers.site with a row of tiny social icons and a download link for the full-resolution set. The icons rendered at 18 by 18 with no padding and sat 6 pixels apart, so on a phone a tap often landed on the wrong service. Setting each anchor to display inline-flex with 6 pixels of padding brought each target to 30 by 30 and pushed the gaps past the spacing threshold, with no change to how the icons look. The page is static HTML on 99helpers, so it was a CSS edit and a re-upload.
Common Mistakes
- ✕Measuring the icon rather than the clickable element — the visible glyph can be 16 pixels while the anchor around it is 40, or the other way round, and only the anchor decides
- ✕Putting the padding on a wrapping div instead of on the link or button — the wrapper is not what handles the click, so the target stays as small as it was
- ✕Assuming inline text links are always exempt — the exception covers targets inside a sentence, not a bare row of links laid out as navigation
Related Terms
WCAG
WCAG, the Web Content Accessibility Guidelines, is the W3C standard that defines what accessible web content is. Its success criteria at Levels A, AA and AAA are what accessibility law and procurement point to.
Focus Indicator
A focus indicator is the visible ring or outline showing which element the keyboard is currently on. Switching it off with an outline of none and putting nothing back is one of the most common faults in hand-written CSS.
Keyboard Navigation
Keyboard navigation is operating a page without a mouse: Tab and Shift+Tab to move between controls, Enter and Space to activate them, arrow keys inside composite widgets such as menus and radio groups.
Responsive Design
Responsive design is building one page that adapts to whatever screen opens it, using flexible layout and CSS media queries, instead of maintaining separate mobile and desktop versions.
Download Link
A download link is an address that makes the browser save a file to disk instead of displaying it in a tab. The behaviour comes from a header on the response or an attribute on the anchor tag, not from anything inside the file.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →