Operable · 2.5 Input Modalities

Target Size (Minimum) WCAG 2.5.8 · Level AA

Pointer targets must be at least 24 by 24 CSS pixels. Smaller targets pass if spaced so a 24 pixel diameter circle centered on each touches no other target or circle, or if an equivalent control passes, the target is inline, its size is a user agent default, or the presentation is essential or legally required.

Level
AA
Since
WCAG 2.2
Principle
Operable
Guideline
2.5 Input Modalities
Try the live demo Open the URL Analyzer Checklist

Live demo

Measure the inbox buttons against 24 pixels

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Show the measuring circles and compare the two versions. On a touch screen, try to tap Mark as unread without hitting Archive or Delete.

Live example

Passes

Inbox

  • Your parcel is on its way

    It will arrive on Thursday.

  • Team lunch on Friday

    We booked a table for twelve at one o'clock.

What happened

    Why it passes

    Each button is 28 by 28 pixels, so a fingertip or a shaky hand lands on the one you meant.

    Why it fails

    The buttons are 16 by 16 pixels and almost touch. Their 24 pixel circles overlap, so it is easy to delete a message when you meant to archive it.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 5 lines

    Fails

    16 pixel icons packed together

    Live preview

    CSS
    .row-actions { display: flex; gap: 2px; }.row-actions button {  box-sizing: border-box;  width: 16px;  height: 16px;  padding: 0;}

    The buttons are 16 by 16 and their centers are 18 pixels apart, so 24 pixel circles on them overlap and the spacing exception cannot help.

    Passes

    Make each target at least 24 by 24

    Live preview

    CSS
    .row-actions { display: flex; gap: 4px; }.row-actions button {  box-sizing: border-box;  min-width: 24px;  min-height: 24px;  padding: 4px;}.row-actions svg { width: 16px; height: 16px; }

    Padding brings each button to 24 by 24 around the same 16 pixel icon, which meets the minimum on its own.

    Passes

    Small targets spaced far enough apart

    Live preview

    CSS
    /* Still 16 by 16, but the centers are now 28 pixels apart. */.row-actions { display: flex; gap: 12px; }.row-actions button {  box-sizing: border-box;  width: 16px;  height: 16px;  padding: 0;}

    A 24 pixel circle centered on each button touches no other button and no other circle, so the spacing exception applies. Check the rows above and below as well.

    Passes

    Links inside a sentence are exempt

    Live preview

    HTML
    <p>By placing the order you accept our <a href="/terms">terms of sale</a>and our <a href="/privacy">privacy notice</a>.</p>

    Targets in a sentence are exempt, because the line height of the text limits their size. The same links stacked in a menu would need to meet the size or spacing test.

    Why it matters

    Who it helps

    People with tremor, limited dexterity or large fingers, and anyone using a touch screen on the move, are less likely to hit the wrong control when targets are big enough or spaced apart.

    W3C: Understanding 2.5.8

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      New in WCAG 2.2, published in October 2023.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      Required where the law names WCAG 2.2 or later at this level: the United Kingdom, Australia and New Zealand.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Measure each target's clickable area in CSS pixels with browser developer tools or a page scanner.
    2. For any target under 24 by 24 pixels, center a 24 pixel diameter circle on it and confirm the circle does not intersect another target or another undersized target's circle.
    3. If spacing fails, check the other exceptions: an equivalent control, targets inline in text, unmodified browser controls or essential presentation.

    Common failures

    Where it breaks

    • Small close or delete icons of about 16 by 16 pixels sit right next to each other with no spacing between them.
    • Tiny pagination links or star-rating targets are packed so closely that their 24 pixel circles overlap.

    On the Accessibility Checklist

    Related