Make Keyboard Navigation Work Before Adding Visual Polish

A practical approach

Step 1

Unplug the mouse or ignore it, and move through the page with Tab. Check that every interactive element receives focus in a logical order.

Step 2

Make focus visible on every element. Style :focus-visible instead of removing outlines.

Step 3

Use native elements for actions and links: button for actions, a for navigation. Avoid clickable div and span elements.

Step 4

For dialogs and menus, move focus into the component when it opens, keep it there while open, close it with Escape and return focus to the trigger.

Step 5

Add a skip link at the top of the page so keyboard users can jump past repeated navigation to the main content.

Worked example

A course filter panel uses div elements with click handlers for its category options. Keyboard users can tab past the panel but cannot select a category, and screen readers announce the options as plain text. Replacing them with real button elements with aria-pressed states made the filters reachable, operable and announced correctly, with no visual change.

A mistake to avoid

Do not set tabindex to positive numbers to force a focus order. It creates an order that differs from the visual layout and is hard to maintain. Fix the order of the source code instead.

Try it yourself

Navigate one complete task on your site, such as registering for a session, using only the keyboard. List every point where focus is lost, invisible or trapped, and fix the first three.

Your implementation checklist

• Every interactive element is reachable with Tab
• Focus is always visible
• Actions use button and navigation uses links
• Dialogs manage and restore focus
• A skip link leads to the main content