Touch Targets Meet Minimum Size Requirements
Peer mentors with motor impairments (NHF specifically targets stroke survivors and people with physical disabilities) frequently struggle with small touch targets. The accessible-touch-target-wrapper component must be applied as a wrapper to every interactive widget in the app, ensuring a minimum 44×44 dp hit area regardless of the visual size of the element. This includes small icons in headers, inline text links, toggle switches, and chip widgets. The accessibility-design-token-enforcer must enforce minimum sizing tokens at theme level so that no component library widget is rendered below the threshold. The accessibility-audit-runner must validate touch target compliance on CI.
User Story
Acceptance Criteria
- Given a peer mentor with motor impairments attempts to tap any button, icon, or interactive element, when the element is rendered, then its touch target is at least 44×44 dp
- Given a small icon button (e.g., edit pencil, modal close) is placed in a dense layout, when the accessible-touch-target-wrapper is applied, then the visual appearance is unchanged but the hit area expands to 44×44 dp
- Given the CI pipeline runs accessibility checks via accessibility-audit-runner, when touch target sizes are evaluated, then elements with hit areas smaller than 44×44 dp cause a lint warning or error
- Given spacing between adjacent interactive elements, when two controls are placed next to each other, then there is at least 8 dp of space between touch target edges to prevent accidental activation
- Given a peer mentor taps the bottom navigation bar, when any tab icon is tapped, then the tap registers correctly on first attempt at least 98% of the time in usability testing
Business Value
NHF's user base explicitly includes stroke survivors and individuals with neuromuscular conditions. Inadequate touch targets directly prevent these users from completing their primary task — registering activities — leading to the underreporting crisis all three organizations described in workshops. Fixing touch targets at the design token and component wrapper level means every future component automatically complies, eliminating the most common mobile accessibility failure at the root cause level.
Components
- Accessible Touch Target Wrapper ui
- Accessibility Design Token Enforcer infrastructure
- Interactive Control Spacing System ui
- Token Accessibility Enforcer service
- CI Accessibility Lint Runner infrastructure
- Accessibility Audit Runner infrastructure