Accesibility
Fitts’ Law proves that target size and distance dictate interaction speed and precision. Designing interfaces around this principle directly improves physical accessibility for users with motor impairments, tremors, or single-handed mobile usage.
Core recommendations
- Enlarge the Interactive Hit Area: expand target dimensions without inflating the visual icon itself. Use generous CSS padding around icons to meet minimum WCAG accessibility standards (44×44 CSS pixels for WCAG 2.2 Level AA; 48×48 dp on Android).
- Minimize Cursor & Thumb Travel: place dependent actions adjacent to the trigger point. Contextual menus, inline actions, and popovers reduce pointer travel compared to fixed top-corner control panels.
- Leverage Screen Boundaries: on desktop UIs, screen edges and corners act as "infinite targets" because the pointer cannot overshoot the display boundary (e.g., system taskbars or top menu bars).
- Maintain Target Spacing: Provide at least 8px of clear spacing between adjacent interactive elements to prevent accidental mis-clicks or taps from adjacent actions.
| Interface Pattern | Application of Fitts' Law | Accessibility Benefit |
|---|---|---|
| Mobile Thumb Zones | Placing primary CTAs, search bars, and main navigation in the bottom third of mobile screens. | Reduces thumb stretch and allows comfortable single-handed operation without regripping. |
| Sticky Action Bars | Pinning "Submit", "Save", or "Checkout" buttons to the viewport during long form scrolling. | Keeps distance ( |
| Radial / Context Menus | Displaying options in a ring surrounding the cursor upon right-click. | Equalizes and minimizes distance ( |
| Full-Width Mobile Buttons | Extending primary action buttons across the full width of mobile viewports. | Maximizes target width ( |
| Destructive Action Isolation | Moving "Delete" or "Reset" options further away from routine primary actions. | Intentional friction via increased distance prevents high-risk accidental triggers. |