What to check on focus
The ring is at least 2px, has a 3:1 contrast ratio against what is behind it, and is never conveyed by color alone. Those three numbers are what an audit measures.
Focus, and why it must be visible
Focus is the state that says 'this is where I am'. It is invisible by default in many designs, which makes a keyboard user lose their place. The fix is one rule: never remove the outline without drawing something else.
What you will see
Both show a ring. If the last one is clipped, an ancestor has overflow hidden.
About 1 min of reading
Try It
Prove the ring survives a restyle
1
Find the removals
grep -n 'outline' public/css/main.css | grep -i none
Before you run it, say out loud what it will print. Then open the answer.
What it prints
Any hit must be paired with a replacement ring in the same rule.
2
Add a compliant ring
printf ':focus-visible { outline: 3px solid #0b5; outline-offset: 2px; }\n' | tee -a public/css/main.css
Before you run it, say out loud what it will print. Then open the answer.
What it prints
A 3px ring offset from the element, so it is visible against both light and dark backgrounds.
3
Bump the cache token
grep -n 'main.css?v=' views/partials/head.ejs
Before you run it, say out loud what it will print. Then open the answer.
What it prints
The token must change after any CSS edit, or the browser serves the old ring.
4
Tab to the extremes
open the page and Tab to the first and last control
Before you run it, say out loud what it will print. Then open the answer.
What it prints
Both show a ring. If the last one is clipped, an ancestor has overflow hidden.
Do not rely on a color change alone to show focus. A user with a color vision impairment sees no difference.
Data Flow
Key press to a visible state
1
Key press moves focus
↓
2
Browser applies :focus styles
↓
3
Ring drawn with outline, not clipped
↓
4
User can see where they are
Why this works
When you have a choice
Focus-visible vs focus
Use :focus-visible for the ring so a mouse click does not draw it. But keep a fallback for browsers or contexts where focus-visible does not match, or the ring disappears for keyboard users.
Examples
Never bare outline none
:focus { outline: none } deletes the only visual cue. If you restyle it, draw a 2px ring with enough contrast against both the background and the element.
Focus must not be clipped
A ring drawn with box-shadow is clipped by an ancestor with overflow hidden. Use outline, or ensure the container has room, and check by tabbing to the first and last item.
Focus follows reading order
Tab order is document order. If the visual layout uses flex order or a grid that reorders, the tab path no longer matches the eyes. Keep the source order honest.
Words this lesson uses
Each one is defined here on this site. Open the entry for the full definition and the other words it points at.
← Names, alt text, and empty alt
Previous Lesson
Names, alt text, and empty alt