On Focus makes sure that simply moving focus to a new element won’t cause any surprising changes. Users should be able to navigate smoothly, knowing that focus alone won’t trigger new content or actions.
Who this impacts
- Keyboard-only and screen reader users: Sudden, automatic changes can confuse or disrupt users relying on keyboard navigation.
- People with cognitive impairments: Predictable focus actions help users feel in control and prevent disorientation.
- Everyone: Smooth, predictable interactions make for a better user experience.
How to meet On Focus
- Avoid automatic actions on focus: Make sure elements don’t activate or change just by receiving focus. Trigger changes only when a user clicks or presses “Enter.”
- Check interactive elements: Test forms, buttons, and menus to ensure they don’t perform unexpected actions when they receive focus.
- Prioritize user control: Keep focus predictable, letting users move through the site without surprises or disruptions.
Practical example
Kitty Cache’s “Transfer Tuna Tokens” form keeps focus changes predictable, so selecting a field doesn’t unexpectedly load additional options or shift the page layout.
Top tips
- Trigger actions on click, not focus: For interactive elements, wait for user input to trigger any changes, keeping focus shifts predictable.
- Keep navigation simple: Avoid any complex focus-triggered changes that could confuse or disorient users.
- Test for smooth tabbing: Go through the site with keyboard navigation to catch any accidental triggers.