Skip to main content
WCAGrules
Quick navigation

Space small targets with min-width and min-height

The Level AA target size rule can be met two ways, and knowing which one you are doing keeps the work honest. Either the target itself measures at least 24 by 24 CSS pixels, or it is small and there is enough clearance around it that a 24 pixel circle centered on it does not reach its neighbors. W3C lists C42 as sufficient for 2.5.8 Target Size (Minimum) and writes it as the spacing answer, using min-width and min-height on the container so a small glyph sits inside an adequate area. Its own scope is links in navigation and pagination menus, where small targets sit in a row and the risk is hitting the wrong one. The visual icon does not have to grow. Padding and a minimum size on the box around it do the work while the design stays as drawn.

How we find it in an audit

Element dimensions are measurable, so listing the targets under 24 pixels is automated. Whether the exception applies is not, because that depends on the distance to the nearest neighbor, so we measure the tight clusters by hand. Pagination rows, table row actions and toolbar icons are where they cluster.

How affected users experience it

This is a motor accuracy issue. Somebody with a tremor, or using a device on a moving train, or working one-handed on a phone, cannot land reliably on a 16 pixel target sitting two pixels from another one. Missing the target is the small version of the problem. Hitting the neighboring one, which on a row of table actions might be Delete, is the large version.

Passes vs. fails

Passes: targets big enough to hit. Fails: tiny, touching controls.

Passes

.icon-btn { min-width: 24px; min-height: 24px;
  display: inline-grid; place-items: center; }

Fails

.icon-btn { width: 16px; height: 16px; }

This guide is our interpretation of W3C technique C42: Using min-height and min-width on target container to ensure sufficient target spacing. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations