Design Inclusive Interaction Flow
Design a new interaction flow that supports diverse input methods and provides accessible feedback from the start — not retrofitted after.
Process
Step 1: Identify All Interactions
List every point in the flow where the user must act:
- Click/tap a button
- Enter text
- Make a selection
- Navigate between steps
- Drag, swipe, or gesture
- Respond to a prompt
Step 2: Assign Input Methods
Using multi-modal-input, for each interaction specify how it works across at least three input methods:
- Keyboard: what keys or shortcuts activate it?
- Pointer/touch: what is the target size and spacing?
- Voice (where applicable): what command triggers it?
Flag any interaction that only works with one input method.
Step 3: Design the Keyboard Layer
Using keyboard-navigation, define:
- Tab order through all interactive elements
- Focus management for modals, dropdowns, and dynamic content
- Skip links and landmark navigation
- Keyboard shortcuts for frequent actions (document them)
Step 4: Specify Targets
Using touch-target-design, specify:
- Minimum sizes for all interactive elements
- Spacing between adjacent targets
- Thumb zone placement for mobile primary actions
Step 5: Design Feedback
Using feedback-and-status, for each interaction specify:
- What the user sees (visual feedback)
- What a screen reader announces (text alternative)
- What happens on success, error, and loading states
- How feedback works with colour, icon, and text combined
Output
Deliver an interaction specification that includes:
- Flow diagram with interaction points marked
- Input method matrix (task × input method)
- Focus order map
- Target size annotations
- Feedback specification per interaction