Focus Styles That Work
\nRings, offsets and forced colors.
\nOpen Waypoint’s schedule, put your mouse away, and press Tab. On the first version you’d see nothing. The reset contained :focus { outline: none; }, added because a designer disliked the ring that appeared when clicking buttons. Keyboard users, switch users and many screen-magnifier users navigate by focus, and they were navigating blind.
Removing focus styles isn’t a style choice; it’s a broken page for a large group of people. The good news is that modern CSS makes good focus styles easy to get right.
\nThe designer’s complaint was real: a ring after every mouse click looks like a glitch. :focus-visible solves it. It matches a focused element only when the browser judges that an indicator is useful:
:root {\n --focus: light-dark(#6d28d9, #c4b5fd);\n}\n\n:focus-visible {\n outline: 2px solid var(--focus);\n outline-offset: 2px;\n}That one rule replaces the reset’s damage. It applies to every focusable element, keyboard users get a clear ring, and mouse users don’t see it on buttons. :focus-visible is Baseline widely available.
Many design systems draw focus rings with box-shadow because shadows used to follow rounded corners and outlines didn’t. Outlines have followed border-radius in all current browsers since 2023, and they have three advantages:
outline-offset puts a gap between the element and the ring, which keeps the ring visible against the element’s own background.box-shadow entirely but keep outlines, recoloured to a system color.A focus indicator needs at least 3:1 contrast against what’s around it (WCAG’s non-text contrast). A violet that works on white can disappear on a dark slate surface. Defining --focus with light-dark(), as above, gives each theme its own ring color from one token: a deep violet on light surfaces, a pale lavender on dark ones.
For components that sit on unpredictable backgrounds (the hero image, a colored track badge), a two-tone ring is safest: an outline in the focus color plus a contrasting halo just inside it:
\n.hero :focus-visible {\n outline: 2px solid var(--focus);\n outline-offset: 2px;\n box-shadow: 0 0 0 2px var(--surface); /* halo between element and ring */\n}Here the shadow is decoration on top of a real outline, so forced-colors users still get the outline.
\nWaypoint’s session cards are clickable: the title is a link, stretched to cover the card with a pseudo-element. The ring then appears around the title text only, which looks odd. Move it to the card with :has():
.session-card:has(a:focus-visible) {\n outline: 2px solid var(--focus);\n outline-offset: 4px;\n}\n.session-card a:focus-visible {\n outline: none; /* the card shows the ring instead */\n}Removing the link’s own ring is fine here, because the card’s ring replaces it whenever the link has visible focus. That’s the only kind of outline: none you should ship: one that’s covered by another indicator.
WCAG 2.2 added Focus Not Obscured: the focused element can’t be entirely hidden by content the author put on top, like a sticky header or a cookie banner. Waypoint’s header is sticky and 64px tall, and when a user tabs backwards, the browser scrolls the focused card to the top of the viewport, right under the header.
\nhtml {\n scroll-padding-top: 64px;\n}Scroll padding tells the browser that part of the scroll container’s viewport is covered. Focus scrolling, anchor links and scrollIntoView() all respect it. If the header’s height changes, store it in a custom property and use it in both places.
The exercise page has the bad reset. Replace it with a :focus-visible ring, move the ring to the card when its link is focused, and add scroll padding for the 64px header. That finishes the responsive section; next, you’ll add motion, starting with transitions, keyframes and respect for reduced-motion settings.
:focus-visible matches when the browser decides a focus indicator is useful, typically keyboard navigation, so you can show a strong ring without showing it on every mouse click.","Use outline with outline-offset for focus rings; it doesn’t change layout, follows border-radius, and stays visible in Windows forced-colors mode where box-shadow disappears.","Define the focus color with light-dark() so each theme gets its own ring color, then check it reaches at least 3:1 contrast against the surface in both.","scroll-padding-top on the scroll container stops a sticky header from covering the element that just received focus."],"further":[{"title":":focus-visible (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible"},{"title":"Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum) (W3C)","url":"https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html"},{"title":"Focus (web.dev Learn CSS)","url":"https://web.dev/learn/css/focus"}],"quiz":[{"q":"Why is button:focus { outline: none; box-shadow: 0 0 0 3px violet; } a risky focus style?
box-shadow doesn’t follow border-radius.","why":"Box shadows do follow the border radius; that was never the issue."}],"answer":1},{"q":"You want a focus ring on keyboard focus but not when a mouse user clicks a button. Which selector?
","options":[{"text":":focus","why":":focus matches every focus, including after a mouse click, so the ring appears on click too."},{"text":":focus-within","why":":focus-within matches an ancestor of the focused element; it doesn’t distinguish keyboard from mouse."},{"text":":active","why":":active matches while a pointer is pressed down, which is the opposite of what you want."},{"text":":focus-visible","why":"Correct. The browser applies its heuristics (keyboard yes, mouse click on a button no, text fields always) and matches only when an indicator helps."}],"answer":3},{"q":"Waypoint’s header is position: sticky and 64px tall. When users tab backwards through the schedule, the focused card scrolls into view hidden under the header. What fixes it?
html { scroll-padding-top: 64px; }","why":"Correct. Scroll padding tells the browser the top 64px of the viewport is obscured, so focus and anchor scrolling stop below it."},{"text":".session-card { margin-top: 64px; }","why":"That adds a 64px gap above every card on the page, all the time, just to work around scrolling."},{"text":"header { z-index: -1; }","why":"The header would then be painted behind the content, which breaks the sticky header entirely."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Rings, offsets and forced colors.
\nRings, offsets and forced colors.
\nThe prototype’s reset removes every focus outline. Replace it so that:
\n2px solid outline in var(--focus) with an outline-offset of at least 2px (and no ring when it isn’t focused)..session-card shows the same ring (you may hide the link’s own ring in that case).:focus { outline: none; } reset; it’s the cause, not something to work around.",":focus-visible is the selector for the ring; :has(a:focus-visible) lets the card react to its link.","Scroll padding goes on the scroll container, the root: html { scroll-padding-top: 64px; }."],"explanation":":focus-visible shows the outline when the browser judges an indicator helps (keyboard focus, text fields) and skips it after mouse clicks on buttons, which is what the reset was clumsily trying to achieve. An outline doesn’t affect layout and survives forced-colors mode, and outline-offset keeps it clear of the element. .session-card:has(a:focus-visible) moves the ring to the card, so hiding the link’s own outline is safe there. scroll-padding-top: 64px on the root tells the browser the top of the viewport is covered, so focus never lands under the sticky header.