Level A
Understandable
WCAG 2.0+
Success Criterion 3.2.1: On Focus
Official W3C Definition
When any user interface component receives focus, it does not initiate a change of context.
Why This Criterion Matters
A "change of context" is a major change that could disorient users who aren't expecting it. When simply tabbing to an element triggers unexpected navigation, form submission, or new window opening, users lose control and may become confused or disoriented.
Change of context includes: Opening new windows, submitting forms, changing focus to another component, or significantly changing page content.
Who Benefits
Blind Users
Cannot see changes happening elsewhere on page.
Cognitive Disabilities
Unexpected changes cause confusion and anxiety.
Low Vision Users
May miss visual changes outside their view area.
Keyboard Users
Need predictable behavior when navigating.
How to Meet This Criterion
Technique: Use Activation, Not Focus
Good Examples
<!-- Good: Button requires click/Enter to activate -->
<button onclick="submitForm()">Submit</button>
<!-- Good: Link only navigates when clicked -->
<a href="/next-page">Go to next page</a>
<!-- Good: Focus shows preview, but no context change -->
<button onfocus="showTooltip()" onblur="hideTooltip()" onclick="openMenu()">
Menu
</button>
<!-- Good: Form only submits on button click -->
<form onsubmit="handleSubmit(event)">
<input type="text" name="search">
<button type="submit">Search</button>
</form>
Bad Examples
<!-- Bad: Focusing select triggers navigation -->
<select onfocus="window.location = this.value">
<option value="/page1">Page 1</option>
<option value="/page2">Page 2</option>
</select>
<!-- Bad: Focusing link opens new window -->
<a href="/popup" onfocus="window.open(this.href)">Info</a>
<!-- Bad: Focusing input submits form -->
<input type="text" onfocus="document.forms[0].submit()">
<!-- Bad: Focus moves unexpectedly to another element -->
<button onfocus="document.getElementById('other').focus()">
Click me
</button>Acceptable Focus Behaviors
- Visual highlight: Showing focus indicator (required for accessibility)
- Tooltips: Displaying help text near the focused element
- Revealing submenus: Showing menu options (as long as focus stays put)
- Updating status messages: Showing character count, validation hints
Common Failures to Avoid
| Failure | Problem | Solution |
|---|---|---|
| Auto-submitting forms on focus | Users accidentally submit incomplete forms | Only submit on explicit button click |
| Opening new window on focus | Unexpected context switch | Open windows on click only |
| Navigation on focus | Users can't explore options without committing | Navigate on activation (click/Enter) |
| Moving focus automatically | Users lose their place | Let users control focus movement |
| Launching media on focus | Unexpected audio/video playback | Require activation to start media |
Testing Methods
Manual Testing Steps
- Tab through all elements: Watch for unexpected changes
- Check each form control: Focus shouldn't submit or navigate
- Test links and buttons: Should only activate on Enter/Space/click
- Watch for new windows: Should only open on activation
- Monitor page changes: Significant changes shouldn't happen on focus alone
Related Criteria
3.2.2 On Input
Input changes shouldn't cause context changes
2.1.1 Keyboard
All functionality keyboard accessible