Draw a strong focus indicator inside the control
Draw the focus indicator inside the component rather than around it, as an inset border or an inset shadow. W3C attaches C41 to one criterion, 2.4.13 Focus Appearance, which is Level AAA, and lists it as sufficient there. The reason is stated in one clause and it is the whole idea. An inset indicator is judged against the internal background color of the component, which is the one background you actually control. Whatever the page around the control is doing, whatever section it lands in, the contrast is a known quantity. There is a second gain that follows from the geometry rather than from the standard. An indicator drawn inside cannot be clipped by an overflow hidden ancestor and cannot collide with whatever sits next to the control, which is what saves it inside a scrolling menu or a tight toolbar.
How we find it in an audit
We tab through the components that live inside scrolling containers, menus, dropdowns, sticky toolbars, data grids, and watch for a ring that has been trimmed to a line or lost entirely. Then we measure the indicator against the component's own background, which is a check a tool can do once you know which pair of colors to compare.
How affected users experience it
A focus ring cut in half by a container edge tells a keyboard user almost nothing, and in a long menu a trimmed sliver is easy to lose track of altogether. Drawn inside, the marker is always fully visible, and somebody arrowing through a list of 30 items always knows which one they are standing on.
Passes vs. fails
Passes
.menu li:focus-visible { box-shadow: inset 0 0 0 3px #14304d; }Fails
.menu { overflow: hidden; }
.menu li:focus { outline: 2px solid #14304d; }
/* the outline is clipped away */Other ways to satisfy this rule
5 guides on this site are filed under 2.4.13 Focus Appearance. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
This guide is our interpretation of W3C technique C41: Creating a strong focus indicator within the component. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.