Keyboard navigation

Keyboard navigation means every interactive flow is reachable and operable without a pointer: logical tab order, visible focus, Escape to dismiss, and arrow keys where composite widgets expect them. Tab order should follow reading order unless a deliberate focus trap applies (modals).

					<button type="button" onclick="openMenu()">Menu</button>
<!-- Avoid tabindex > 0; use DOM order or roving tabindex in widgets -->
				

| Key | Expected behavior | |-----|-------------------| | Tab / Shift+Tab | Move focus between focusable controls | | Enter / Space | Activate buttons and many links | | Escape | Close dialogs, menus, tooltips | | Arrows | Move within tabs, listbox, menu (when implemented) |

Custom components must implement the same interaction contract as native ones—ARIA alone does not add keyboard support.

On interviews: `tabindex` values; roving tabindex in React listbox; skip links; why positive `tabindex` is discouraged.

Common pitfalls: `outline: none` without replacement; mouse-only hover menus; trapping focus without Escape; invisible focusable elements off-screen.

The trade-off is visual minimalism versus discoverability for keyboard-only users.

Checklist:

• No positive `tabindex` in normal pages.
• Visible focus styles on all interactive elements.
• Escape closes overlays and restores focus.
• Arrow-key patterns match ARIA widget type.