By the end of this lesson you can
- Design for people with limited dexterity, tremors and other motor impairments.
- Apply target size and spacing requirements.
- Provide alternatives to complex gestures and dragging.
The idea
Motor impairments affect how precisely and quickly people can move. People may use a mouse with difficulty, a keyboard, switch devices, voice control, head pointers or eye tracking.
Target size
WCAG 2.2 criterion 2.5.8 (AA) requires targets of at least 24 by 24 CSS pixels, or enough spacing around smaller targets. 2.5.5 (AAA) asks for 44 by 44. Platform guidelines recommend 44–48. Bigger targets help everyone.
Gestures and dragging
- Pointer gestures (2.5.1): anything needing multi-finger or path-based gestures (pinch, swipe patterns) must also work with a single tap or click.
- Dragging (2.5.7, new in 2.2): anything done by dragging, such as reordering lists or moving sliders, needs a single-pointer alternative, such as up and down buttons or a "Move to" menu.
- Pointer cancellation (2.5.2): actions should happen on release, not on press, so people can slide off to cancel.
- Motion actuation (2.5.4): features triggered by shaking or tilting need an alternative and a way to turn them off.
Time
People may need more time. Avoid short time limits, or let people extend them. Avoid content that moves or updates before people can act on it.
Why it matters in real projects
Motor impairments are common, including arthritis, which affects many older people, as well as temporary injuries and situational limits like using a phone while walking. Small targets and complex gestures can make tasks impossible for some people. Simple alternatives cost little to design and benefit everyone.
A realistic example
A to-do app lets people reorder tasks only by dragging, and the delete icon is 16 by 16 pixels next to the edit icon. A user with Parkinson's frequently deletes tasks by mistake and cannot reorder at all.
The designer enlarges targets to 44px with spacing, moves delete into a menu with undo, and adds a "Move up / Move down" option to each task's menu. The same user can now manage their list independently.
Step by step
Measure targets
Check all interactive targets against 24px minimum and 44px recommended.
Check spacing
Make sure small targets have enough space around them.
List gestures
Find any multi-finger, path or drag interactions.
Add alternatives
Design single-tap or button alternatives for each.
Check timing
Find time limits and moving content.
Test with alternative input
Try voice control or switch access if possible.
Common mistakes
Mistake Drag-only interactions.
Instead Provide single-pointer alternatives.
Mistake Tiny adjacent targets.
Instead Enlarge and space them.
Mistake Actions triggered on press.
Instead Trigger on release so people can cancel.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Motor accessibility review
Review a mobile app for motor accessibility.
Steps
- Measure targets on three screens.
- List gestures and drag interactions.
- Design alternatives.
- Try the app with voice control.
Deliverable
A review with redesigned alternatives.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Design for limited precision and alternative input.
- Targets need at least 24px, ideally 44–48px.
- Provide alternatives to gestures and dragging.
- Give people enough time.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.