One customer kept tapping your Instagram icon on her phone and landing on Facebook instead. Another one gave up on page 3 of your blog archive because the page numbers were so close together that every tap hit the wrong one. Neither of them used the words, but both were describing a WCAG target size problem.
WCAG 2.2 added a rule for exactly this. It is one of the easier criteria to understand and, on most WordPress sites, one of the quicker ones to fix. This post explains what the rule asks for, the exceptions in plain words, where small targets usually hide, and how to make them bigger without redesigning the site.
What success criterion 2.5.8 actually asks for
Success criterion 2.5.8 Target Size (Minimum) is Level AA and new in WCAG 2.2. A “target” is anything you click or tap: a link, a button, an icon, a checkbox, a close X on a popup. The rule says each target should be at least 24 by 24 CSS pixels, unless one of the exceptions applies.
Two details trip people up.
- It is the clickable area that counts, not the drawing. A 16-pixel icon inside a link with enough padding can pass, because the area that responds to a tap is larger than the icon itself. A 30-pixel icon whose link wraps only a 14-pixel glyph can fail.
- CSS pixels are not screen pixels. A phone with a dense screen still reports CSS pixels to the browser, so the number you see in the browser’s developer tools is the number that matters.
Who is this for? People with tremors, arthritis or limited hand control. People using a phone on a bus. Older visitors who find small things hard to hit. Anyone with a large thumb. The rule sets a floor, not a target to aim for; bigger is usually better.
The exceptions, in plain words
The criterion would be impossible to meet on some pages without them, so it helps to know them before you start measuring everything.
Spacing
A target smaller than 24 by 24 can still pass if it has enough empty space around it. The test in the standard: imagine a circle 24 CSS pixels across centered on the small target. If that circle does not overlap another target, or another small target’s circle, the small one is fine. In practice, a row of tiny icons with generous gaps between them can pass, while the same icons packed tightly together fail.
Equivalent
If the same action is available through another control on the same page that does meet the size, the small one is allowed. A tiny “next” arrow on a carousel can pass if there is also a properly sized “next” button beside it. Be honest with yourself here: the bigger control has to do the same job and be on the same page.
Inline
Links inside a sentence or paragraph are exempt. Nobody expects you to space out the lines of a paragraph so that every inline link is 24 pixels tall. This covers links in body text, not a row of links in a footer that happens to be written as text.
User agent control
If the browser decides the size and you have not changed it, the target is exempt. A plain, unstyled checkbox is the usual example. Once your theme restyles it into something smaller, the exception no longer applies.
Essential
Where a particular size or layout is essential to the information, or legally required, the rule does not apply. Pins on a map are the standard example. This exception is narrow; “the designer liked it” is not essential.
Where small targets hide on a typical WordPress site
The same handful of places tend to fail.
Social icons in the header and footer
Theme social icons are often 16 or 18 pixels, sit inside links with no padding, and are packed close together. If you use the built-in block, the size setting usually helps; our guide to adding social icons with the Social Icons block covers where that lives. Check the spacing too, because a slightly bigger icon with no gap can still fail.
Pagination
Blog archives and WooCommerce shop pages often show page numbers as bare digits: “1 2 3 … 9”. Each digit link may be only 10 or 12 pixels wide. Phone users notice this quickly, and it is easy to fix with padding.
Mobile menu toggles and submenu arrows
The hamburger button is usually fine. The small arrows that open submenus inside the mobile menu often are not, and they tend to sit right next to the parent link, so a missed tap opens the wrong page. If you are not sure how your theme builds that panel, this explanation of how WordPress mobile menus are set up helps you find the right setting.
Close buttons, carousel dots and “back to top”
The X on a popup or cookie notice is frequently a 12-pixel glyph in a corner. Slider dots are another classic: tiny circles a few pixels apart. Floating “back to top” arrows and chat buttons are usually big enough, but check what they sit on top of.
Small text links in rows
Footer links such as “Privacy · Terms · Accessibility”, breadcrumb trails and tag clouds are rows of short links with very little height. They are not inline links in a sentence, so the inline exception does not cover them.
Form controls your theme restyled
Custom checkboxes, radio buttons and toggle switches built from styled spans are often smaller than the browser default they replaced. Product filters and quantity plus/minus buttons in stores are worth a look as well.
How to measure WCAG target size without special tools
You do not need a paid tool for this. A desktop browser is enough.
- Open the page in Chrome, Edge or Firefox and right-click the icon or link you are unsure about, then choose Inspect.
- In the developer tools, make sure the highlighted element is the link or button itself, not the icon inside it. You may need to click one level up in the code tree.
- Hover over that element in the code panel. The browser shows its width and height on the page, in CSS pixels.
- If either number is below 24, look at the gap to the nearest other target. Picture the 24-pixel circle from the spacing exception and ask whether it would touch a neighbor.
- Write down the page, the element and the size. Repeat for each template, not each page: if the footer fails on one page, it fails on all of them.
Automated scanners report some target size problems, but only part of them, and they struggle with the spacing exception. A person measuring the dozen usual suspects on each template is still the most reliable check.
Fixing small targets without a redesign
Most fixes are a few lines of CSS that make the clickable area bigger while the icon stays the same size. That matters to owners, because nothing has to look different.
Give the link padding, not the icon size
Padding on the link grows the touch target size invisibly. Something like this, added through a child theme or the Additional CSS area (see adding custom CSS in WordPress), handles a typical social icon row:
.site-footer .social-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 6px;
}The class names will differ on your site. The pattern is the same: make the link a box, give it a minimum width and height, and let the icon sit in the middle.
Add space between neighbors
For pagination and footer link rows, a small gap often does more than enlarging each item. Adding padding to each page number link and a gap between them usually fixes an archive in one go.
Replace fake controls with real ones
If a toggle or checkbox is a styled span, replacing it with a real form control, styled carefully, fixes size and keyboard problems together. This is a bigger job and worth doing when the control matters, such as a filter or a consent box.
Do not make it too big for its neighbors
Padding that overlaps the next target creates a new problem: the tap lands on the wrong item. After a change, test on a real phone with your thumb, not just in the developer tools.
Where this sits among the other 2.2 changes
The WCAG target size rule is one of nine criteria added in version 2.2. If you are working through the list, it pairs well with dragging movements and focus not obscured, which also tend to show up on mobile. Our post on what else is new in WCAG 2.2 walks through them all, and the full set of WCAG 2.2 AA requirements puts target size in context with the rest of Level AA. For the wider picture of audits, fixes and monitoring, start at our website accessibility hub.
One honest note: meeting the 24-pixel floor does not make a page easy to use on its own. Labels, focus styles and clear wording still matter. But this is a fix you can usually see working the same afternoon.
Frequently asked questions
Is 24 by 24 pixels the same as the larger sizes I have seen recommended?
No. The 24 by 24 CSS pixel figure is the Level AA minimum in WCAG 2.2. Larger figures come from platform design guidance and from the stricter Level AAA criterion, 2.5.5 Target Size (Enhanced), which asks for 44 by 44 CSS pixels. Going larger than 24 where the layout allows is kind to phone users.
Do links inside my blog paragraphs need to be 24 pixels tall?
No. Links inside a sentence or block of text fall under the inline exception. The rule is aimed at standalone controls such as icons, buttons, pagination and rows of footer links. A list of links in a sidebar or footer is not inline text, so those still need enough size or enough spacing.
Does the icon have to be 24 pixels, or just the clickable area?
Just the clickable area. The target is the part of the page that responds to a click or tap, usually the link or button element. Padding counts, so a small icon inside a padded link can pass while looking exactly the same as before.
Will an accessibility scanner tell me which targets are too small?
Some scanners flag small targets, but they catch only part of the problems and often cannot judge the spacing exception correctly. Treat their results as a starting list, then measure the usual suspects yourself in the browser developer tools and try them on a real phone.
If you would rather have someone measure every template and list what fails against 2.5.8 and the rest of Level AA, our WCAG audit does that, and the remediation work that follows an audit covers the CSS and theme changes. Either way, start with the pagination and the footer icons; they are usually where the wrong taps happen.
Next in this series: Skip Link Accessibility: Test and Fix Skip to Content
