Target Size Minimum 24px in WCAG: How Success Criterion 2.5.8 Works

What WCAG 2.5.8 says about target size

The W3C states the goal plainly: make controls easier to activate. The intent is to ensure targets can be activated easily without accidentally activating an adjacent target. People with dexterity limitations or difficulty with fine motor movement find it hard to accurately activate small targets when other targets are too close.

The W3C explicitly lists hand tremors, spasticity and quadriplegia among the disabilities addressed. Some people also use specialized input devices instead of a mouse or trackpad, and these typically provide less accuracy than mainstream pointing devices. Meeting the requirement also makes touchscreen interfaces easier to use.

One nuance matters: the criterion defines a minimum size and, if that cannot be met, a minimum spacing. It is therefore still possible to have very small targets and pass, provided no adjacent target is too close. The W3C nonetheless recommends, as a best practice, meeting at least the minimum size regardless of spacing, and considering the stricter 2.5.5 Target Size (Enhanced) for important links and controls.

Users who benefit include, but are not limited to:

• People using a mobile device where the touchscreen is the primary mode of interaction
• People with mobility impairments such as hand tremors, whether they use a mouse, stylus or touch
• People exposed to shaking, for example on public transportation
• People who access a device using one hand
• People with large fingers, or who operate the device with only part of a finger or a knuckle

How to measure a 24 by 24 CSS pixel target

For a target to be "at least 24 by 24 CSS pixels", it must be possible to draw a solid 24 by 24 CSS pixel square, aligned to the horizontal and vertical axes, completely within the target. The target itself may be skewed; it is the square that must stay aligned with the page. Watch out for rounded corners: on a small button they can leave too little room for the square, in which case the target counts as undersized.

A CSS pixel is the canonical unit of measure for lengths in CSS. It is density-independent and distinct from the hardware pixels of the display. Crucially, the requirement is independent of zoom: when users zoom in, the CSS pixel size of elements does not change. You cannot argue that a target will become large enough once the user zooms.

A few measurement rules from the W3C documentation are worth knowing before any audit:

• Where two targets overlap, the overlapping area should not be counted toward target size, unless both perform the same action or open the same page.
• A target that lets users pick a value by position (a slider, a color picker showing a gradient, an editable area where you place the cursor) counts as one target.
• Targets obscured by content shown after a user interaction or a script (a combobox suggestion list, a modal dialog, a cookie banner, a survey dialog) are out of scope while they are obscured.
• However, targets inside that new content displayed on top must meet the criterion.

The spacing exception: the 24px circle method

A target smaller than 24 by 24 CSS pixels is undersized. It can still pass thanks to spacing: center an imaginary circle with a 24 CSS pixel diameter on the target's bounding box, and that circle must not intersect another target or the circle of another undersized target. For a rectangular target, the bounding box is the target itself. For a clipped or rounded shape, or a complex clickable SVG, first determine the bounding box and then its center, which can even fall outside the target for a concave shape.

The W3C explains that touchscreen devices and user agents generally have internal heuristics to identify the link or control closest to a touch, so sufficient spacing can work as effectively as a larger target. The W3C's examples help you calibrate your own controls:

• A row of six 24 by 24px icon buttons: pass.
• The same buttons at 20 by 20px with 4px of space between them: pass through the spacing exception.
• The same 20 by 20px buttons with no space: fail, because the circles intersect.
• Buttons only 16px tall with no targets above or below: pass; two stacked rows with only a 1px gap: fail.
• Menu items 24px tall (text plus padding): pass; at 18px tall: fail.
• A small 16 by 16px target touching a large target, such as a linked image: fail; adding a 4px gap makes it pass.

The other four exceptions: equivalent, inline, user agent, essential

Beyond spacing, the criterion provides four exceptions. Each has a precise scope, so document it in your audit rather than applying it by default.

For the essential exception, the W3C strongly encourages authors to provide equivalent functionality through alternative means to the extent practical.

• Equivalent: the function can be achieved through a different control on the same page that meets the criterion.
• Inline: the target is in a sentence, or its size is constrained by the line-height of non-target text. The reason given is that text reflow based on viewport size makes it impossible to anticipate where links may be positioned relative to one another, and setting a readable line height matters more. Line-height should be interpreted as perpendicular to the flow of text: in a language displayed vertically, it is horizontal.
• User agent control: the size is determined by the user agent (for example the browser) and not modified by the author, such as the calendar of an input type="date" or browser scrollbars. If you change a scrollbar's dimensions, you need sufficient spacing between it and the page content.
• Essential: a particular presentation is essential or legally required for the information conveyed. W3C examples include pins on a digital map, a necessarily dense interactive data visualization, and online forms that a jurisdiction legally requires to replicate paper forms, which can constrain target size: a legal requirement to replicate small targets can then be considered essential.

Fixing it in CSS: sufficient technique C42

The W3C lists one sufficient technique for this criterion: C42, using min-height and min-width on the target container to ensure sufficient target spacing. The example below applies these properties to an icon toolbar. Remember that the target is the region of the display that accepts a pointer action: if the container is not clickable itself, its minimum dimensions are meant to ensure spacing around a smaller target rather than enlarging the target. To actually enlarge the active area, apply min-width and min-height to the clickable element itself (the button or link).

The documentation also notes that it can be beneficial to provide an option to increase the active target area without increasing the visible target size, or to provide a mechanism to control the density of the layout. Needs vary: users with visual field loss may prefer a more condensed layout with smaller controls, while users with other forms of low vision may prefer large controls.

/* Technique C42: min-width / min-height on the target
   container, to ensure sufficient spacing around
   a smaller button */
.toolbar li {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Alternative: enlarge the active area itself
   by sizing the clickable element */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Target size audit checklist

To review the criterion on a page, work through the steps below, starting with dense areas such as toolbars, pagination, menus, close buttons and icons placed over images. If you work with the French RGAA framework, see our pages on RGAA 5 and on the difference between RGAA and WCAG, then run a free test of your pages and set up continuous monitoring to catch regressions.

• List every pointer-operable target: links, buttons, form fields, clickable icons.
• For each one, check that an axis-aligned 24 by 24 CSS pixel square fits entirely inside it.
• For each undersized target, center a 24px circle on its bounding box and check it does not intersect another target or another circle.
• Set aside links within sentences (inline exception) and controls whose size is set by the user agent (such as the browser) and not modified by the author, such as a date input calendar or scrollbars (user agent exception).
• Check whether a function provided by a small target is also available through another compliant control on the same page.
• Also test content shown on top of the page: modal dialogs, cookie banners, suggestion lists.

Frequently asked questions

Further reading on Conformly

• Complete guide to RGAA 5
• Differences between RGAA and WCAG
• Free online RGAA scanner

Sources

This article relies on the official sources listed at the end of the page.

• W3C — Comprendre 2.5.8