a11y.world Accessibility, practiced.

Lab 10

Target Size and Spacing

WCAG 2.2 target size tester (2.5.8), 24 px spacing

WCAG 2.2 asks for pointer targets of 24 by 24 CSS pixels, or enough clear space around a smaller one. This lab draws that rule on real buttons so you can see it, break it, and fix it.

Before you start

Success criterion 2.5.8 is one sentence with a long tail. The sentence: a pointer target is at least 24 by 24 CSS pixels. The tail: a smaller target still passes when a 24 px circle centred on it touches no other target and no other small target's circle. Links inside a sentence are exempt. So are controls the browser draws, controls whose size is essential, and targets that have an equivalent somewhere else on the page.

Every control in the lab is a real button at its real CSS size. The pixels you see are the pixels the criterion counts. A dashed circle appears on every control under 24 px. A control passes by spacing when its circle has the space to itself. When two small controls are too close, the lab draws the line between the centres that is too short.

The 44 px toggle scores the same controls against the enhanced criterion, 2.5.5. That level has no spacing exception, which is why so many icon rows that pass at AA fail at AAA.

The lab

Start with the share bar: five 18 px icons that all pass by spacing. Set the gap to 2 and they all fail together. Then open the crush scenario and try the fixes in order. The readout under the table says what each one did and why.

The lab needs JavaScript. The sections above and below still describe what it measures.

What you just learned

  • Size or space, not both. A control passes at 24 by 24, or it passes because the 24 px circle on its centre meets nothing else. A row of 18 px icons with 6 px gaps passes. The same row with 2 px gaps fails as a group.
  • Height alone does not un-crush a row. Making every icon 24 px tall leaves the centres where they were. The row still fails. Wrapping onto a second line is the fix that usually fits.
  • Equal shares can be useless. Splitting the width equally across five icons can leave every one of them at 23 px, so every one fails. Giving the first controls the full 24 and the last one what remains passes four of five with the same room.
  • Aim half a pixel above the line. A spacing fix computed exactly at 24 px, then rounded to whole pixels, can land at 23.5. The lab places centres at 24.5 px and rounds, so rounding cannot undo it.
  • Different elements, different rules. Every control owes 24. A primary action is easier to hit at 44, which is advice at AA and the rule at AAA. A link in running text is exempt. A control the page does not own cannot move, so everything around it has to.
  • When nothing fits, say so. An overflow menu is an equivalent control and the criterion allows it. If even that is out of reach, the honest move is a finding that lists what fails and what was tried.
How the lab decides

The size test is a hinge: the shortfall below 24 on each side, and zero once the side reaches 24. Growing a failing control is the only move that lowers that shortfall, so the Grow button grows and never shrinks. The spacing exception is a decision, not a distance that can be reduced gradually: the circle either meets something or it does not. That is why the spacing fixes move controls apart in one step rather than nudging them. Everything is measured on whole CSS pixels after rounding, the same way a browser lays the page out.

Embed this lab

Host the Target Size and Spacing lab on your own page with one element and one script. It runs entirely in the visitor's browser, sends nothing back, and adds a small credit link.

<div data-a11y-world-lab="target"></div>
<script src="https://a11y.world/embed.js" async></script>

The lab's styles are scoped to its own container. The controls inside are real buttons, so your page's global button styles apply to them too.

  • Twenty-four pixels is a smaller promise than it sounds

    WCAG 2.2 asks for pointer targets of 24 by 24 CSS pixels. The spacing exception means a row of 18 px icons can pass and a row of 24 px icons can be hard to hit. Here is the rule, the circle, and the five exceptions, drawn.

  • When the toolbar will not fit

    Five icons, a narrow bar, and a 24 px rule that cannot be met as laid out. Adding height does not fix it. Wrapping does. An equal split of the width can leave every icon one pixel short. Here is the order to try fixes in, and when to stop.