Keyboard Navigation

Also Known As

TL;DR

Explanation

Keyboard navigation relies on tab order (set by DOM order, modified by tabindex), focus indicators (visible outline on focused elements), keyboard shortcuts (Enter/Space to activate buttons, Escape to close modals), and no keyboard traps (user can always navigate away). Focus management is critical in SPAs — when a modal opens, focus should move to it; when it closes, focus should return to the trigger. ARIA roles ensure screen readers announce the correct element type.

Diagram

flowchart TD
    USER[Keyboard user] --> TAB[Tab key]
    TAB --> FOCUS{Element focusable?}
    FOCUS -->|yes| INDICATOR[Focus indicator visible<br/>outline ring]
    FOCUS -->|no - div span| BROKEN[Inaccessible<br/>cannot reach element]
    INDICATOR --> INTERACT{Element type}
    INTERACT -->|button| ENTER_SPACE[Enter or Space activates]
    INTERACT -->|link| ENTER2[Enter follows link]
    INTERACT -->|input| TYPE[Type text]
    INTERACT -->|select| ARROWS[Arrow keys choose option]
    BROKEN -.->|fix with| TABINDEX[tabindex=0<br/>+ keyboard handler]
style BROKEN fill:#f85149,color:#fff
style INDICATOR fill:#238636,color:#fff
style TABINDEX fill:#d29922,color:#fff

Common Misconception

Why It Matters

Common Mistakes

• outline: none on :focus — removes the only visual indicator of keyboard focus; use outline: none only with a custom focus style.
• tabindex > 0 — positive tabindex overrides natural DOM order, creating confusing navigation for keyboard users.
• Click-only event handlers on non-button elements — divs with onclick are not keyboard-activatable without tabindex and keydown handling.
• Not managing focus in modals — focus must move to the modal and be trapped within it until closed.

Code Examples

/* Removing focus indicator — keyboard users cannot see where they are: */
* { outline: none; }  /* Never do this */

/* Non-keyboard-accessible interactive element: */
<div onclick="openMenu()" style="cursor:pointer">Menu</div>
<!-- Not in tab order, no keyboard activation -->

/* Custom focus styles instead of removing outline: */
:focus-visible {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

<!-- Use native interactive elements: -->
<button type="button" onclick="openMenu()" aria-expanded="false">Menu</button>
<!-- Natively: tab-focusable, Enter/Space activates, ARIA state communicated -->

References

• ↗ https://www.w3.org/WAI/WCAG21/Understanding/keyboard

Tags

Related Terms