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, während Sie es dennoch für Hilfstechnologien (z. B. Screenreader) mit freigeben .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-focusable
kann auch auf einen Container angewendet werden – dank :focus-within
wird der Container angezeigt, wenn ein untergeordnetes Element des Containers den Fokus erhält.
<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-hidden
und visually-hidden-focusable
können auch als Mixins verwendet werden.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}