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-focusable
til visuelt at skjule et element som standard, men til at vise det, når det er fokuseret (f.eks. af en tastaturbruger). .visually-hidden-focusable
kan også anvendes på en container – takket være :focus-within
, vil containeren blive vist, når et underordnet element i containeren får fokus.
<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-hidden
og visually-hidden-focusable
kan også bruges som mixins.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}