Fokusring 1.2.0

Fuege mit .velin-focus-ring jedem Element einen konsistenten, zugaenglichen Fokusring hinzu. Farbe, Breite und Abstand lassen sich ueber CSS Custom Properties anpassen. English: focus-ring

Reifegrad: Globale :focus-visible-Outlines und .velin-focus-ring sind stable in 1.2.0 und an WCAG 2.2 Focus Appearance orientiert. Das ist keine Zertifizierung deiner gesamten UI.

Wann verwenden

Verstaerke den Fokus auf Custom Controls, die outline zuruecksetzen.
Theme den Ring mit --velin-focus-ring-color, --velin-focus-ring-width und --velin-focus-ring-offset.
Native interaktive Elemente erhalten meist bereits eine globale :focus-visible-Outline.

Wann nicht verwenden

Entferne Fokusstile nie ohne gleichwertigen sichtbaren Ersatz.
Zeige den Ring nicht nur bei Mausklicks; :focus-visible ist Absicht.
Behandle einen schoen aussehenden Ring nicht als AAA-Nachweis fuer die ganze Seite.

Standard-Fokusring

Druecke Tab, um den Button zu fokussieren. Der Ring erscheint nur bei :focus-visible, nicht beim Mausklick.

<button type="button" class="velin-btn velin-btn--outline velin-focus-ring">Fokussiere mich</button>

Eigene Farbe

Ueberschreibe --velin-focus-ring-color, um die Ringfarbe zu aendern.

<a href="#" class="velin-focus-ring" style="--velin-focus-ring-color: rgba(220, 53, 69, .5)">Gefahren-Ring</a>
<a href="#" class="velin-focus-ring" style="--velin-focus-ring-color: rgba(25, 135, 84, .5)">Erfolgs-Ring</a>

CSS-Variablen

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

Globale Fokusstile helfen, Focus-visible-Erwartungen zu erfuellen; .velin-focus-ring bindet Custom-Elemente an dieselben Tokens an.
Kombiniere mit ausreichender Zielgroesse und nicht verdecktem Fokus.
Forced-Colors- und High-Contrast-Modi brauchen echte Outlines; ersetze sie nicht durch reine Farbhilfen.