A shaky hand
About one person in twenty over 65 has essential tremor.
Try it here
Your pointer shakes here. Click each row of blue squares, and count how many tries the small ones take.
Why should I care?
Small buttons packed close together make people whose hands shake tap the wrong thing.
- 1 in 20people over 65 have a shaking hand (essential tremor).
- 1 in 5American adults have arthritis.
- Everyoneon a moving bus.
What to do on your website
- Make buttons big: at least 44 by 44.
- Leave space between them.
- Keep “Delete” away from “Book”.
More, if you want it
Check your own website with this tool
This is the button you’ll drag.
- Make sure you can see your bookmarks bar, the row just under the address bar. If it isn’t there, press Ctrl + Shift + B, or ⌘ + Shift + B on a Mac.
- Drag the Shaky hand button up into that bar and let go.
- Open your own website and click Shaky hand in the bar. Click it on any page and your pointer starts to shake, and your clicks land where the shaking pointer is. Click again for a stronger tremor, and again to switch it off.
This works on a computer, in Chrome, Safari, Firefox or Edge. Phones and tablets have no bookmarks bar, so there are three other ways below.
On a phone or tablet
iPhone or iPad, from the Share button
- Copy the tool:
- Open the Shortcuts app, make a new shortcut, and add the action Run JavaScript on Web Page. Paste the tool in place of its sample script.
- In the shortcut’s details, turn on Show in Share Sheet, and name it Shaky hand.
- Once: in Settings, open Apps › Shortcuts › Advanced and turn on Allow Running Scripts.
- On your website in Safari, tap Share, then Shaky hand.
Android, from Chrome’s address bar
- Copy the tool:
- Bookmark any page with the star, then edit that bookmark: name it gc shaky hand and paste the tool in as its address.
- On your website, type gc shaky hand in the address bar and tap the starred bookmark it suggests. Choosing it from the bookmarks list won’t work.
Use it later, on a computer
Send yourself the link, or a reminder for tomorrow morning. Both are made on your phone and sent nowhere else.
Get all 10 tools in one go
One Good Citizens folder with every tool in it. Download the file, then bring it into your browser:
Download the bookmarks file- Chrome: Bookmarks › Import bookmarks and settings › Bookmarks HTML file
- Safari: File › Import From › Bookmarks HTML File
- Firefox: Bookmarks › Manage bookmarks › Import and Backup › Import Bookmarks from HTML
More free tools: Fovea, Color vision, Aging eyes, or all 10.
Why this matters
Think of a customer trying to tap “Book a visit” on your website from the back of a moving bus. Many hands shake a little all the time: with age, with cold, with some medicines, and with conditions such as essential tremor and Parkinson’s disease.
Beside this, your pointer shakes. Try clicking each row of blue targets, the things on a page you click or tap. The small ones are the size of a typical text link; the large ones are the size most phone makers recommend. Count how many tries the small ones take.
More common than most people think
Essential tremor is the most common movement disorder in adults. It affects about 1 person in 751 overall, and about 1 in 20 over the age of 65.
That is several times more people than have Parkinson’s disease, which the World Health Organization counted at more than 8.5 million2 people in 2019, twice as many as 25 years before. Close to half of people with multiple sclerosis4 report a tremor. One American adult in five has arthritis, and cerebral palsy is the most common motor disability in childhood.
Then there is everyone else, some of the time: hands that are cold, tired, anxious or over-caffeinated, medicines from asthma inhalers to antidepressants, and phones used on buses, trains and in cars. The accessibility guidelines name “vibrating environments” right beside hand tremors.
The shake is worst when you aim
Essential tremor is an action tremor: it gets stronger when the hand is doing something, and aiming at a small button is exactly that.
It shakes four to twelve times a second. Parkinson’s tremor is different, strongest at rest and a little slower. Either way, a click lands where the hand happens to be at that instant, as it would on the bus, not where the person meant. A small button needs many attempts, and a button right next to “Delete” or “Cancel” is a trap: one near miss and the booking is gone.
Age changes pointing too, though perhaps not as people assume. One study found people in their sixties slower but not less accurate5 than younger adults: they get there, and it costs them more time and effort. A touchpad slowed them most of all.
How big is big enough?
The Web Content Accessibility Guidelines (WCAG), the web’s standard rules for pages disabled people can use, ask for targets of at least 24 by 24 pixels7, or smaller ones with enough space around them.
That is the minimum, level AA. The enhanced level asks for 44 by 448, close to what Apple (44 points) and Google’s Material Design (48) recommend for touch. Links inside a sentence are exempt, which is one more reason to make the important actions proper buttons.
For thumbs, a study at the University of Maryland found errors stopped falling once targets reached about 9.6 millimeters6. For older people on touchscreens, researchers have suggested buttons of about 20 millimeters with a few millimeters between them.
All the advice, in full
Make targets 24 pixels at least, 44 for anything that matters
Meet the 24 by 24 minimum everywhere, and give primary actions 44 to 48 pixels, about the width of a fingertip.
Leave room between them
Space between targets matters as much as their size. A near miss should land on nothing, not on the wrong thing.
Act on release, not on press
If an action fires when the finger or button lifts, a person who slips can drag away and cancel it (WCAG 2.5.2 Pointer Cancellation).
Keep destructive actions apart
Never put Delete next to Save. Offer undo, or ask once, because a misplaced click is ordinary, not exceptional.
Offer a way that is not a drag
Hover-only menus, sliders and tiny drag handles are hard with a tremor. Give a single click or tap alternative (WCAG 2.5.7).
Test with the settings people use
Turn on Mouse Keys and Slow Keys on a computer, or Touch Accommodations on an iPhone, which can ignore repeated taps, and make sure your page still works.
Works on prototypes too
This tool changes how your clicks and taps land, and it catches pointer presses as well as clicks, so it works on prototypes that are drawn as a picture, such as a Figma prototype link, as well as on live pages.
A few apps listen for presses in ways no bookmark can reach; if nothing changes when you click, the app is one of them.
What people get wrong
- Tremor means Parkinson’s
- Essential tremor is several times more common, and many other things cause a shaky hand, from medicines to cold.
- The guidelines require 44 pixels
- The common level, AA, asks for 24 by 24, or smaller targets with space around them. 44 by 44 is the enhanced level.
- Older people miss more
- In at least one careful study they were slower but no less accurate. The cost of small targets is time and effort as well as errors.
- Bigger is always better
- Past a fingertip’s width the gains are small. Spacing, and keeping risky actions apart, matter as much.
Where these numbers come from
Every figure on this page comes from one of these 10 sources. The small numbers in the text point here.
Review
How common is essential tremor? Update on the worldwide prevalence of essential tremor·
Tremor and Other Hyperkinetic Movements
Data
Parkinson diseaseFact sheet
Reference
TremorMSD Manual Professional Version
Review
Understanding tremor in multiple sclerosis: prevalence, pathological anatomy, and pharmacological and surgical approaches to treatment·
Tremor and Other Hyperkinetic Movements
Peer-reviewed study
How age affects pointing with mouse and touchpad: a comparison of young, adult, and elderly users·
International Journal of Human–Computer Interaction
Peer-reviewed study
Target size study for one-handed thumb use on small touchscreen devices·
MobileHCI 2006
Standard
Understanding WCAG 2.5.8: Target Size (Minimum)Web Content Accessibility Guidelines 2.2
Standard
Understanding WCAG 2.5.5: Target Size (Enhanced)Web Content Accessibility Guidelines 2.2
Standard
Understanding WCAG 2.5.2: Pointer CancellationWeb Content Accessibility Guidelines 2.2
Guidance
Touch AccommodationsApple Support