Hoppa till huvudinnehållet Hoppa till dokumentnavigering
in English

Visuellt dold

Använd dessa hjälpare för att visuellt dölja element men hålla dem tillgängliga för hjälpmedel.

Dölj ett element visuellt samtidigt som det fortfarande kan exponeras för hjälpmedel (som skärmläsare) med .visually-hidden. Använd .visually-hidden-focusableför att visuellt dölja ett element som standard, men för att visa det när det är fokuserat (t.ex. av en användare som bara använder tangentbordet). .visually-hidden-focusablekan även appliceras på en behållare – tack vare :focus-withinkommer behållaren att visas när något underordnat element i behållaren får fokus.

Hoppa till huvudinnehållet
En behållare med ett 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-hiddenoch visually-hidden-focusablekan även användas som mixins.

// Usage as a mixin

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

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