Tabbing through a page
Keyboard and screen reader users move through interactive elements with Tab. Focus follows DOM order, not visual position, so a CSS reordering can make focus jump around confusingly.
- Native controls like button, a, and input are focusable by default.
- tabindex 0 makes a custom element focusable in natural order.
- tabindex minus one removes an element from the tab order but allows programmatic focus.
- Avoid positive tabindex values, which override natural order and are hard to maintain.
Managing focus
Interactive widgets must move focus deliberately.
- When a modal opens, move focus into it and trap it so Tab cycles within the dialog.
- When the modal closes, return focus to the element that opened it.
- Skip links let users jump past repeated navigation to the main content.
Visible focus
Never remove the focus outline without a replacement. A visible focus indicator is essential for sighted keyboard users. Use focus visible to show the ring for keyboard interaction while hiding it for mouse clicks.
Key idea
Focus follows DOM order, so keep markup logical, trap focus in modals and restore it on close, and always keep a visible focus indicator.