Ga naar hoofdinhoud Ga naar navigatie in documenten
Check
in English

Visueel verborgen

Gebruik deze helpers om elementen visueel te verbergen, maar houd ze toegankelijk voor ondersteunende technologieën.

Verberg een element visueel terwijl het toch kan worden blootgesteld aan ondersteunende technologieën (zoals schermlezers) met .visually-hidden. Gebruik .visually-hidden-focusabledit om een ​​element standaard visueel te verbergen, maar om het weer te geven wanneer het is gefocust (bijvoorbeeld door een gebruiker met alleen toetsenbord). .visually-hidden-focusablekan ook worden toegepast op een container. Dankzij :focus-within, wordt de container weergegeven wanneer een onderliggend element van de container de focus krijgt.

Ga naar hoofdinhoud
Een container met een focusseerbaar 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>

Beide visually-hiddenen visually-hidden-focusablekunnen ook als mixins worden gebruikt.

// Usage as a mixin

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

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