2.5.5 Target Size (Enhanced)

WCAG 2.2 · 2.5.5 AAA Operable

What it requires

The size of the target for pointer inputs must be at least 44 by 44 CSS pixels, except where the target is available through an equivalent link or control on the same page that does meet 44×44; the target is in a sentence or block of text (inline); the size is determined by the user agent and not modified by the author; or a particular presentation of the target is essential. This is the stricter, Level AAA companion to 2.5.8 Target Size (Minimum), which only asks for 24×24 CSS pixels. A larger target is easier to hit, so pointing errors and mis-taps are reduced.

Small targets disproportionately fail people with motor or dexterity limitations such as tremor, reduced fine-motor control, or limited mobility; people using a device one-handed, in motion, or on a touchscreen; and people whose pointing is less precise, including some older users and those using a head-pointer, mouth stick, or trackball. When targets are too small or crowded, these users tap the wrong control or cannot activate the intended one at all.

How to detect it

Checks for Target Size (Enhanced)
Check How
Measure targets Inspect each interactive control in dev tools; confirm its rendered box is at least 44×44 CSS px.
Crowded controls Look at icon buttons, close “×” buttons, pagination, and toolbar groups where small targets cluster.
Exceptions apply? Confirm whether the target is inline text, user-agent default, essential, or duplicated by a larger equivalent.
Zoom / reflow Check sizes still hold when the page is zoomed or reflowed at 320 CSS px width.
Automated tools axe and similar can flag some small targets, but exceptions need human judgement — manual measurement is required.

How to fix it

  1. Give every pointer target a hit area of at least 44×44 CSS pixels.
  2. Where the visible icon is small, expand the clickable region with padding rather than only enlarging the glyph.
  3. Add spacing between adjacent targets so their hit areas do not overlap or crowd.
  4. If a control must stay small, provide an equivalent, larger link or button to the same action elsewhere on the page.
<button class="icon-btn" aria-label="Close dialog">
  <svg width="20" height="20" aria-hidden="true" focusable="false"><use href="#x"/></svg>
</button>

<style>
  /* 20px glyph, but a 44x44 hit area via padding */
  .icon-btn { display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; padding: 12px; }
</style>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 2.5.5 Target Size (Enhanced) — pointer target dimensions and spacing can't be reliably judged by static analysis. Treat this as a manual review using the console check and steps below.

Run this in the browser console

target-size-2-5-5.js 
// Read-only: flags interactive targets smaller than 44x44 CSS px.
const sel = 'a, button, input, select, [role=button], [role=link], [tabindex]';
const small = [...document.querySelectorAll(sel)].filter(el => {
  const r = el.getBoundingClientRect();
  return r.width && r.height && (r.width < 44 || r.height < 44);
});
small.forEach(el => el.style.outline = '2px solid red');
console.table(small.map(el => {
  const r = el.getBoundingClientRect();
  return { tag: el.tagName, w: Math.round(r.width), h: Math.round(r.height), text: el.textContent.trim().slice(0, 30) };
}));
console.log('Suspect targets:', small);

What to check manually: Confirm each flagged element is actually a pointer target (not decorative), and verify any small target qualifies for an exception — e.g. it's inline in a sentence, or an equivalent control of sufficient size exists elsewhere. No script can judge those.