Visuell verborgen 1.2.0

Nutze .velin-sr-only, um ein Element visuell zu verstecken und es fuer assistive Technologien wie Screenreader zugaenglich zu halten. Mit .velin-sr-only--focusable wird es bei Fokus wieder sichtbar. English: visually-hidden

Reifegrad: .velin-sr-only und .velin-sr-only--focusable sind stable A11y-Helper in 1.2.0. Es gibt keine separate Core-CSS-Klasse .velin-visually-hidden; nutze .velin-sr-only.

Wann verwenden

Stelle zugaengliche Namen oder Landmark-Texte bereit, die sehende Nutzer aus dem Layout erkennen.
Skip-Links: kombiniere .velin-sr-only mit .velin-sr-only--focusable.
Formularlabels, wenn ein sichtbares Label wirklich nicht moeglich ist.

Wann nicht verwenden

Verstecke interaktive Controls nicht mit .velin-sr-only, ausser sie werden bei Fokus sichtbar oder haben ein gleichwertiges sichtbares Control.
Nutze es nicht statt display: none oder hidden, wenn Inhalte fuer alle entfernt werden muessen.
Verlasse dich nicht allein auf Placeholder; sr-only Labels sind ein Fallback.

Funktionsweise

.velin-sr-only schneidet das Element auf einen 1x1-px-Bereich zu und nutzt dafuer clip, clip-path, feste Groessen und overflow: hidden. Es verschwindet aus dem visuellen Flow, bleibt aber im Accessibility Tree.

.velin-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

Beispiel: verborgene Ueberschrift

Fuege einer Navigation eine visuell verborgene Ueberschrift hinzu, damit Screenreader-Nutzer einen Orientierungspunkt erhalten.

Die Ueberschrift "Hauptnavigation" ist visuell verborgen, wird aber von Screenreadern angesagt.

<nav aria-labelledby="nav-heading">
  <h5 class="velin-sr-only" id="nav-heading">Hauptnavigation</h5>
  <ul>
    <li><a href="#">Start</a></li>
    <li><a href="#">Funktionen</a></li>
    <li><a href="#">Preise</a></li>
  </ul>
</nav>

Ein Skip-to-content-Link bleibt verborgen, bis Nutzer per Tab darauf fokussieren. Kombiniere .velin-sr-only mit .velin-sr-only--focusable, damit Tastaturnutzer wiederholte Navigation ueberspringen koennen.

Druecke Tab, um den Skip-Link oben einzublenden.

<a href="#main-content" class="velin-sr-only velin-sr-only--focusable">
  Zum Hauptinhalt springen
</a>

Beispiel: Formularlabels

Wenn ein sichtbares Label nicht noetig ist, etwa bei einer Suche mit Placeholder, kannst du das <label> verstecken und das Formular zugaenglich halten.

<form class="velin-flex velin-flex--items-center velin-flex--gap-2">
  <label for="sr-search" class="velin-sr-only">Suche</label>
  <input type="search" id="sr-search" class="velin-input" placeholder="Suchen...">
  <button type="submit" class="velin-btn velin-btn--primary">Los</button>
</form>

Welche Technik wann?

Es gibt mehrere Wege, Inhalte zu verstecken. Waehle nach Bedarf, ob das Element zugaenglich bleiben soll.

Technik	Sichtbar	Im Accessibility Tree	Belegt Platz	Am besten fuer
`.velin-sr-only`	Nein	Ja	Nein	Inhalte, die nur Screenreader ansagen sollen
`display: none`	Nein	Nein	Nein	Inhalte, die fuer alle verborgen sind
`visibility: hidden`	Nein	Nein	Ja	Layoutplatz reservieren
`aria-hidden="true"`	Ja	Nein	Ja	Dekorative Visuals fuer Screenreader ausblenden

Haelt Inhalte im Accessibility Tree, waehrend sie visuell beschnitten werden.
initA11y({ skipLink: true }) kann einen Skip-Link auf #main injizieren; die Docs liefern bereits einen Skip-Link im Chrome.
Ebenfalls verfuegbar: .velin-not-sr-only, um das Clipping in verschachtelten Kontexten aufzuheben.