Focus Ring 1.2.2

Add a consistent, accessible focus ring to any element with .velin-focus-ring. Customize the color, width, and offset via CSS custom properties. Deutsch: fokusring

Maturity: Global :focus-visible outlines and .velin-focus-ring are stable in 1.2.0, oriented toward WCAG 2.2 focus appearance (AAA support language — not a certification of your UI).

When to use

Reinforce focus on custom controls that reset outline — add .velin-focus-ring.
Theme the ring with --velin-focus-ring-color, --velin-focus-ring-width, and --velin-focus-ring-offset.
Most native interactive elements already receive a global :focus-visible outline from the a11y layer.

When not

Do not remove focus styles without providing an equivalent visible indicator.
Do not show the ring on mouse click only — :focus-visible is intentional.
Do not treat a pretty ring as proof of AAA conformance for the whole page.

Default focus ring

Press Tab to focus the button — the ring appears on :focus-visible only (not on mouse click).

<button type="button" class="velin-btn velin-btn--outline velin-focus-ring">Focus me</button>

Custom color

Override --velin-focus-ring-color to change the ring color.

<a href="#" class="velin-focus-ring"
   style="--velin-focus-ring-color: rgba(220, 53, 69, .5)">
  Danger ring
</a>

<a href="#" class="velin-focus-ring"
   style="--velin-focus-ring-color: rgba(25, 135, 84, .5)">
  Success ring
</a>

CSS Variables

:root {
  --velin-focus-ring-width: 3px;
  --velin-focus-ring-offset: 2px;
  --velin-focus-ring-color: var(--velin-color-focus);
}

.velin-focus-ring:focus-visible {
  outline: var(--velin-focus-ring-width) solid var(--velin-focus-ring-color);
  outline-offset: var(--velin-focus-ring-offset);
}

Global focus styles help meet focus-visible expectations; .velin-focus-ring opts custom elements into the same tokens.
Pair with adequate target size (buttons default ≥ 44px) and non-obscured focus (initA11y({ scrollPadding: true }) for fixed headers).
Forced-colors / high-contrast modes still need real outlines — do not replace with color-only cues.

Visually hidden · Accessibility
Interactions · Buttons