Gå til hovedinnhold Hopp til dokumentnavigering
in English

Visuelt skjult

Bruk disse hjelperne til å visuelt skjule elementer, men hold dem tilgjengelige for hjelpeteknologier.

Skjul et element visuelt samtidig som det kan eksponeres for hjelpeteknologier (som skjermlesere) med .visually-hidden. Bruk .visually-hidden-focusablefor å visuelt skjule et element som standard, men for å vise det når det er fokusert (f.eks. av en bruker som bare bruker tastaturet). .visually-hidden-focusablekan også brukes på en beholder – takket være :focus-within, vil beholderen vises når et underordnet element i beholderen får fokus.

Gå til hovedinnhold
En beholder med et fokuserbart element . 
<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å brukes som mixins.

// Usage as a mixin

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

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