Keyboard access and visible focus

Native controls carry behavior

Use links for navigation and buttons for actions. They enter the tab order and provide expected keyboard activation without extra code.

:focus-visible {
  outline: 3px solid #f08a24;
  outline-offset: 3px;
}

Never remove an outline unless you replace it with a focus indicator that is at least as visible across backgrounds.

Test the sequence

Start at the browser chrome and use Tab, Shift+Tab, Enter, Space, and arrow keys where the component pattern calls for them. Focus order should follow the reading and task order. Opening a dialog must move focus inside; closing it must return focus to the control that opened it.

Common mistakes

• Adding positive tabindex values to force order.
• Making a div clickable without its keyboard and semantic contract.
• Hiding an offscreen menu while leaving its controls focusable.

Exercise

Put the mouse aside and complete the primary task on one page. Record every point where focus disappears, becomes trapped, or reaches hidden content.