Make anything people tap at least 44 by 44 CSS pixels, the size WCAG 2.1 sets at its AAA level, with space between neighbours. Most fixes are padding rather than redesign, and a thumb test finds them.

Links built for a mouse pointer

A mouse pointer touches a single pixel. A fingertip pressed on glass covers far more, and a thumb more again.

Plenty of sites were laid out for the pointer: footer links stacked with no space between them, size buttons the width of a fingernail, a close cross a few pixels square.

On a phone, the finger lands on two things at once and the phone guesses which was meant. Sometimes it guesses right.

Most people find that merely annoying. For someone with a tremor, arthritis or limited control of their hands, a cluster of small targets can make a page unusable.

Where small targets hide

The fourth is the cheapest to fix. When the words beside a checkbox are properly linked to it in the code, tapping the words ticks the box, and the target grows from a few pixels to a whole line.

What WCAG 2.1 says

WCAG 2.1, published in June, added a requirement called Target Size: anything a visitor taps or clicks should be at least 44 by 44 CSS pixels.

It sits at level AAA, the highest and optional level, which few rules ask for. It is still the clearest yardstick available.

The main exceptions are sensible: links inside a sentence, controls left at the browser's default size, and small targets with a full-size equivalent on the same page.

A related level A requirement asks for actions to wait until the finger is lifted, so a wrong touch can be dragged off the target before anything happens.

What a CSS pixel is

A CSS pixel is the unit web pages are laid out in, not a dot on the screen. Phones draw each one with several dots of their own, so it comes out at a similar size on most of them.

On a typical phone, 44 CSS pixels is roughly seven millimetres square: small, but large enough for most fingertips to hit reliably.

Apple's design guidelines for iPhone apps ask for the same 44, in Apple's own units, and Google's design guidelines ask for 48. Both are describing the same finger.

What Google flags

Google checks the same thing from its side. Search Console's mobile usability report lists pages with clickable elements too close together, and Google's Mobile-Friendly Test reports it for a single page.

It sits alongside text too small to read and content wider than the screen, the problems that make a page hard to use on a phone.

Google has counted mobile-friendliness in mobile search since 2015, so a report full of these is worth an afternoon, quite apart from accessibility.

Spacing matters as much as size

A large target pressed against another large target still misfires. The finger lands on the boundary, and the phone has to choose.

Space between targets gives a slightly misplaced tap somewhere harmless to land. Google's design guidelines ask for at least 8 of their units between neighbouring targets.

Size does not have to mean visible size, either. An icon can stay small on screen while the area that responds to a tap extends around it, which keeps the design and fixes the problem.

A worked example

A children's clothing store sells baby and toddler clothes from a shop in a suburban plaza and online. Each product page offered sizes as a row of small squares, from newborn up to 4T.

Each square was about 24 pixels wide, set edge to edge. On a phone held in one hand, often with a child in the other arm, the wrong size was easy to choose and easy to miss.

The shop heard about it from customers: wrong sizes in orders, and an email from a grandmother with arthritis who could not choose a size at all.

Its web company enlarged each size button to 48 pixels with gaps between them, letting the row wrap onto two lines on a phone. The colour swatches and quantity buttons got the same treatment.

The checkout checkboxes were linked to their labels, so tapping the words works, and every page was tried one-handed on two phones before anyone called the job done.

Testing with a thumb

The test needs no tools. Hold a phone in one hand and use the site with that thumb only, standing up, the way people actually shop.

Try the menu, a product page, the form and the checkout. Every time the wrong thing opens, or you hesitate before tapping, write it down.

Then ask somebody else to try, ideally somebody older, with larger hands, or new to the site. Watch, and say nothing.

Finally, turn the phone sideways and zoom in with two fingers, as people with low vision do, and repeat the parts that matter most.

Things not to do

Do not stop visitors zooming. Some sites switch off pinch-to-zoom to keep the layout tidy, removing the one workaround for a person who cannot hit a small target or read small text.

Do not enlarge targets by enlarging everything. A page of enormous buttons is as hard to scan as a page of tiny ones; the fix is usually the tappable area and the spacing, not the type.

And do not rely on a hover effect to show what can be tapped. Phones have no hover.

The counter-case

Not every small target is a failure. Links inside running text can stay the size of the words around them, and WCAG says so explicitly.

A table of figures, or a staff tool used at a desk with a mouse, can reasonably be denser, and AAA is optional for almost everybody.

Nor does this call for a redesign. On most sites, extra padding and spacing in the stylesheet fix the worst targets in an afternoon, with little visible change.

But for the controls that matter, such as menus, product choices, forms and checkout: 44 pixels, space between, and a thumb test.

This week

  1. Use your site one-handed on a phone.
  2. List every target you missed or hesitated over.
  3. Open Search Console's mobile usability report.
  4. Link checkbox labels to their boxes.
  5. Enlarge menu, size and close buttons to 44 pixels.
  6. Add space between neighbouring targets.
  7. Make sure zooming is not switched off.

Step one is where the real list comes from. Measuring targets in code finds the obvious ones; ten minutes with a thumb finds the ones customers actually miss.

Another way an embedded tool can shut people out is covered in booking widgets that keyboard users cannot use.

Frequently asked questions

How big should a touch target be?

At least 44 by 44 CSS pixels, the size WCAG 2.1 sets at level AAA. Apple's guidelines for iPhone apps use 44 too; Google's design guidelines use 48.

Is the target size rule mandatory?

Rarely. It sits at WCAG's optional AAA level, which few rules require. It is still the clearest measure available, and the problems it describes affect every phone user.

Which links are exempt from the size?

Links inside a sentence, controls left at the browser's default size, and small targets that have a full-size equivalent on the same page doing the same job.

What does Search Console flag?

Its mobile usability report lists pages with clickable elements too close together, alongside text too small to read and content wider than the screen.

Do bigger targets mean a redesign?

Usually not. Extra padding around icons and links, more space between them, and labels linked to checkboxes fix most problems with little visible change.

How do I test my site with a thumb?

Use it one-handed on a phone, thumb only, standing up. Note every wrong tap or hesitation, then watch somebody older or unfamiliar with the site try it.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Buttons smaller than a fingertip?

Send us your address. We will test the site one-handed on several phones and list every target to fix.

Start a Conversation