Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Visuelt skjult

Brug disse hjælpere til visuelt at skjule elementer, men hold dem tilgængelige for hjælpeteknologier.

Skjul et element visuelt, mens det stadig tillades at blive udsat for hjælpeteknologier (såsom skærmlæsere) med .visually-hidden. Bruges .visually-hidden-focusabletil visuelt at skjule et element som standard, men til at vise det, når det er fokuseret (f.eks. af en tastaturbruger). .visually-hidden-focusablekan også anvendes på en container – takket være :focus-within, vil containeren blive vist, når et underordnet element i containeren får fokus.

Spring til hovedindhold
En beholder med et fokuserbart 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>

Både visually-hiddenog visually-hidden-focusablekan også bruges som mixins.

// Usage as a mixin

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

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