touch-target-design
Touch Target Design
Design interactive elements that are large enough, spaced enough, and forgiving enough for people with limited precision — whether from disability, age, environment, or device.
Minimum Sizes
Touch (mobile, tablet)
- Minimum: 44×44 CSS pixels (WCAG 2.2 Level AA)
- Recommended: 48×48 CSS pixels (Google Material guidelines)
- For high-stakes or frequent-use targets: 56×56 or larger
Pointer (desktop)
- Minimum: 24×24 CSS pixels (WCAG 2.2 Level AA)
- Recommended: 32×32 for common actions
- For destructive or irreversible actions: larger targets reduce errors
More from owl-listener/inclusive-design-skills
plain-language-design
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
13user-preference-respect
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
12situational-impairment-mapping
Map situational impairments that affect all users in specific contexts — not just people with permanent disabilities. Use when designing for mobile, outdoor, noisy, stressful, or multitasking contexts. Triggers on: situational, context of use, environment, one-handed, bright sunlight, noisy, driving, multitasking, gloves, temporary disability, context, edge case.
12multi-modal-input
Design interfaces that offer multiple input methods so users can choose what works for their abilities and context. Use when designing any interactive system where users provide input — forms, search, editors, creative tools, communication interfaces. Triggers on: multi-modal, input methods, alternative input, how people interact, mouse alternative, touch alternative, input flexibility, switch access, eye tracking, head pointer.
12keyboard-navigation
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
12voice-interaction
Design voice interactions and speech interfaces that work for people with diverse speech patterns, accents, and communication styles. Use when designing voice commands, voice search, dictation, voice assistants, or any interface that accepts speech input. Triggers on: voice, speech, dictation, voice command, voice search, speech recognition, accent, stutter, speech disability, non-verbal, AAC, voice assistant, talk to type.
12