Tab Order · Focus · Skip Links · Test Here
Press Tab to move through elements. Each should get a visible focus ring.
Link Element (Tab here second)| Issue | Impact | Fix |
|---|---|---|
| No visible focus indicator | Users can't see where they are | Never use outline:none without replacement |
| Keyboard trap | User gets stuck in a component | Ensure Escape closes modals/dropdowns |
| Wrong tab order | Confusing navigation flow | Follow DOM order, avoid positive tabindex |
| No skip link | Must tab through entire nav on every page | Add "Skip to content" as first link |
| Non-interactive elements focusable | Confuses screen reader users | Only interactive elements get tabindex |
| Key | Action |
|---|---|
| Tab | Move to next interactive element |
| Shift + Tab | Move to previous element |
| Enter | Activate buttons and links |
| Space | Activate buttons, toggle checkboxes |
| Escape | Close modals, dropdowns, popups |
| Arrow keys | Navigate within radio groups, menus |