Navigation & Interaction
Keyboard access
- All functionality must be accessible via keyboard
-
No keyboard trap - users must be able to navigate away from any
element using keyboard alone
- Provide keyboard shortcuts for common actions
-
Make sure Tab key order is logical and follows the visual order
Additional resources:
Focus visible
- Ensure keyboard focus is always visible
-
Do not remove the default outline style using CSS unless replacing
it with another clear indicator
-
Focus indicator must have a contrast ratio of at least 3:1 against
adjacent colors
- The focus indicator area should be at least 3px
Additional resources:
Focus order
- The focus order should match the visual reading order
- Use HTML semantic structure to determine focus order
-
Avoid using positive tabindex values as it breaks the logical tab
order
-
Test with keyboard navigation to ensure the tab order is logical
Target size
-
Interactive elements should be at least 44 by 44 CSS pixels in
size
- This includes buttons, links, and form controls
-
Provides better usability for users with motor control
difficulties and touch device users
Additional resources:
Link purpose
-
The purpose of every link must be clear from the link text alone
or from the surrounding context
- Avoid generic link text like "click here" or "more"
-
Use descriptive link text that indicates where the link goes
- For icon-only links, provide an
aria-label
Additional resources:
Gesture and motion
- Do not rely solely on gestures for functionality
- Provide alternatives to gesture-based controls
-
Ensure that device orientation is not required - provide both
portrait and landscape modes
- Avoid triggering actions on device tilt or shake
Name, role, and state
-
All user interface components must have a name that describes
their purpose
-
The role of each component must be clear (button, link, checkbox,
etc.)
-
The state of interactive components must be programmatically
determinable
-
Use semantic HTML and ARIA attributes to provide this information
Additional resources:
