People who can’t use a mouse, or who find the keyboard faster, move through links and buttons one by one with the Tab key. What tells them “where am I right now” is the focus ring that outlines the element.
Let’s try it out
First, let’s experience moving around with the Tab key.
What not to do: outline: none
The focus ring is really the CSS outline. Because the default look feels a bit clunky, some sites remove it like this.
button:focus {
outline: none; /* ❌ Never do this */
}It looks tidy, but keyboard users lose their cursor. The right move isn’t to “remove” it, but to “redraw it nicely,” like below.
TipsWhich reset CSS should I use?Not sure what reset CSS is? Start hereThe right way: redraw with focus-visible
button:focus-visible {
outline: 3px solid #e5967a;
outline-offset: 2px;
}| Part | Meaning |
|---|---|
:focus-visible | A selector that shows the ring only during keyboard use |
outline: 3px solid … | The ring’s thickness, style, and color (your brand color is OK) |
outline-offset: 2px | Leaves a gap between the element and the ring for readability |
Using :focus-visible instead of :focus is the standard today. No ring appears when you click with the mouse, and it shows up only when you arrive by Tab — so mouse users and keyboard users both get a good experience.
In the first place, Tab only reaches “pressable tags”
The Tab key only stops on inherently pressable tags like <a>, <button>, and <input>. Even if you make a <div> or <span> act like a button by adding click behavior (with JavaScript), Tab skips right past it — for keyboard users, it’s as if it doesn’t exist.
<div onclick="send()">Send</div> <!-- ❌ Tab can't reach it -->
<button onclick="send()">Send</button> <!-- ○ Tab stops here, and Enter presses it -->button. The div may look pressable, but the keyboard skips right past it.Make pressable things out of pressable tags. “Writing HTML that matches meaning,” which you learned in the HTML course, is also the foundation for keyboard operation.
HTMLButtons and input fieldsThe basics of the button tag are in this lessonTab order is the HTML order
Focus moves in the order you wrote it in the HTML. If the visual arrangement and the written order don’t match, the ring jumps around the screen and causes confusion. Move the layout around with CSS, but write the HTML in reading order, in the order people operate it — keep this principle and it naturally comes out right.
Summary of this lesson
- The focus ring is the keyboard user’s cursor. Don’t remove it with
outline: none - Instead of removing it, redraw it nicely with
:focus-visible+outline - Tab order = HTML order. Writing in reading order is the foundation