Understand the idea

Keyboard users move through interactive elements in a meaningful order. A visible focus indicator tells them which control will respond next.

Use links for navigation and buttons for actions. Keep DOM order aligned with the reading order. Avoid positive tabindex values, which create a separate focus sequence. A skip link can help people bypass repeated navigation and reach main content.

Read the example

Put this HTML in the body. Add :focus-visible { outline: 3px solid purple; outline-offset: 3px; } to your stylesheet; a CSS rule inside an HTML comment does not apply a style.

HTML · EXAMPLE
<a href="#main">Skip to content</a>
<nav aria-label="Main"><a href="/">Home</a></nav>
<main id="main" tabindex="-1">
  <h1>My journal</h1>
</main>

A small mistake, explained

What goes wrong

Removing outlines without supplying an alternative can make keyboard position invisible.

How to fix it. Provide a clearly contrasting focus style and test it on every surface, including the dark theme.

Try it yourself

Put the mouse aside. Use Tab, Shift+Tab, Enter, Space and Escape where applicable to complete the page’s main task.

Further reading

W3C WAI — Focus Visible

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.