Operable · 2.5 Input Modalities

Target Size (Enhanced) WCAG 2.5.5 · Level AAA

Pointer targets must be at least 44 by 44 CSS pixels, unless an equivalent target of that size is on the same page, the target is inline in a sentence or block of text, its size is set by the user agent and not modified, or a particular presentation is essential.

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

Live demo

Measure the photo buttons against 44 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 photo buttons in both versions. On a touch screen, try to tap Share without touching Delete.

Live example

Passes

Lake trip, photo 3 of 12

Our boat on the last evening of the trip.

What happened

    Why it passes

    Each button is 44 by 44 pixels, big enough for a fingertip, a shaky hand or a head pointer, even though the icons are still small.

    Why it fails

    The buttons are 24 by 24 pixels. That meets the AA minimum but not this AAA level, and people with a tremor or large fingers often hit the button next to the one they meant.

    Examples

    Code that fails, and the fix

    Five 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 4 lines

    Fails

    Icon buttons of 24 by 24 pixels

    Live preview

    CSS
    .photo-tools button {  box-sizing: border-box;  width: 24px;  height: 24px;  padding: 4px;}

    24 by 24 meets the AA minimum in 2.5.8, but this AAA criterion asks for 44 by 44, and no larger control on the page does the same job.

    Passes

    Grow the hit area, keep the icon

    Live preview

    CSS
    .photo-tools button {  box-sizing: border-box;  min-width: 44px;  min-height: 44px;  padding: 12px;}.photo-tools svg { width: 20px; height: 20px; }

    Padding makes each button 44 by 44 pixels while the icon stays 20 pixels, so the design barely changes but the target is much easier to hit.

    02What changes 5 lines

    Fails

    Small page number links

    Live preview

    CSS
    .pagination a {  display: inline-block;  padding: 2px 6px;  font-size: 14px;  line-height: 20px;}

    Each page link is 24 pixels tall and about 20 pixels wide for a single digit, far below 44 by 44.

    Passes

    Page links of at least 44 by 44

    Live preview

    CSS
    .pagination a {  display: inline-flex;  align-items: center;  justify-content: center;  min-width: 44px;  min-height: 44px;}

    Each link fills a 44 by 44 area and flexbox keeps the number in the middle.

    Passes

    A link inside a sentence is exempt

    Live preview

    HTML
    <p>Read our <a href="/returns">returns policy</a> before you send an item back.</p>

    A target inside a sentence is exempt, because its size is set by the line of text around it.

    Why it matters

    Who it helps

    Larger targets help people with tremor, limited dexterity or large fingers, people using a device on the move, and people with low vision who cannot aim precisely at small controls.

    W3C: Understanding 2.5.5

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

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

    1. Measure the clickable area of each target in CSS pixels using browser developer tools or a page scanner.
    2. Flag targets smaller than 44 by 44 CSS pixels and check whether an exception applies, such as an equivalent larger control, inline text links or unmodified browser controls.

    Common failures

    Where it breaks

    • Icon buttons such as close, edit or share have hit areas of only 24 by 24 pixels and no larger equivalent.
    • Custom-styled checkboxes and pagination links have clickable areas smaller than 44 by 44 pixels.

    Related