Input
Device independent design
Make it easier for users to operate functionality through various inputs.
Make all content accessible without hover
Don’t hide important information behind hover effects. If you must use hover, make sure users can:
- Access the same information another way
- Easily close any pop-ups
- Keep browsing without disruption
Source: WCAG 2.1: Content on Hover or Focus
Don’t rely on visuals alone for instructions
Never give directions using only visual or sound cues. For example, avoid saying:
- “Click the blue button”
- “Select the circle on the right”
- “Use the large icon”
Instead, use clear descriptions that work for everyone:
- “Click the ‘Submit’ button (blue)”
- “Select ‘Next’ in the bottom right corner”
- “Choose the ‘Download’ icon (large circle)”
Source: WCAG 2.1: Sensory characteristics
Motion controls need alternatives
When using features that respond to device movement (like shaking or tilting):
- Always provide a regular button or control as an alternative
- Let users turn off motion controls completely
Example: Instead of only using “shake to undo”:
- Include an “Undo” button
- Let users disable shake controls in settings
Think: Not everyone can or wants to move their device to use features.
Source: WCAG 2.1: Motion Actuation
Make every gesture simple
Never require complex movements (like pinch or swipe) without simpler alternatives.
Example: For a map view
- Instead of only pinching to zoom: Add + and - buttons
- Instead of only dragging to move: Add arrow buttons
- Instead of two-finger rotate: Add a rotation control
Think: Some users can only click or tap with one finger.
Source: WCAG 2.1: Pointer Gestures
Screen orientation should be flexible
Let users view content in any orientation:
- Portrait (vertical)
- Landscape (horizontal)
Only lock orientation when it’s absolutely necessary (like for certain games or specific visual tools).
Think: Users might have their devices mounted or locked in a fixed position.
Source: WCAG 2.1: Orientation