Zum Hauptinhalt springen Zur Dokumentennavigation springen
Check
in English

Optisch versteckt

Verwenden Sie diese Helfer, um Elemente visuell auszublenden, aber für Hilfstechnologien zugänglich zu halten.

Blenden Sie ein Element visuell aus und lassen Sie es dennoch mit Hilfstechnologien (z. B. Bildschirmleseprogrammen) verfügbar sein .visually-hidden. Wird verwendet .visually-hidden-focusable, um ein Element standardmäßig visuell auszublenden, aber anzuzeigen, wenn es fokussiert ist (z. B. durch einen Nur-Tastatur-Benutzer). .visually-hidden-focusablekann auch auf einen Container angewendet werden – dank :focus-withinwird der Container angezeigt, wenn ein untergeordnetes Element des Containers den Fokus erhält.

Zum Hauptinhalt springen
Ein Container mit einem fokussierbaren Element .
html 
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

Beide visually-hiddenund visually-hidden-focusablekönnen auch als Mixins verwendet werden.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}