- Success Criterion 3.2.1
- Conformance level A
Tabbing to a Menu Item That Auto-Navigates to Its Page
3.2.1 — On Focus
Scenario
Setting
An e-book reader's library page
What’s wrong
Tabbing to a menu item auto-navigates to its page.
Example
<a href="/library/audiobooks" onfocus="location.href=this.href">Audiobooks</a>Why it matters
A keyboard user tabbing through the library menu to reach a later item accidentally navigates away the instant focus lands on Audiobooks, before they meant to select it.
How to test
Tab to a menu item and stop: if the page navigates to that item's destination automatically without pressing Enter, it fails.
How to fix
Let Enter or a click activate navigation; never fire it from onfocus.
<a href="/library/audiobooks">Audiobooks</a>Outcome
A reader tabs through the whole menu and only navigates when they actually press Enter.
Who is affected
Keyboard users scanning menu options in sequence lose their place every time focus passes over this link.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Element That Loses Focus the Instant It’s Reached
- Tabbing Into a Field That Opens a Modal Automatically
- Selecting an Option That Submits the Form Automatically
- Keyboard Focus Triggering an Unexpected Scroll Jump
- Tabbing Into a Field That Opens a Chat Widget
- Autofocus Chain That Jumps Focus From One Field to Another