Bootstrap 5.2 / Helpers

Visueel verborgen

Gebruik deze helpers om elementen visueel te verbergen maar toegankelijk te houden voor hulptechnologieën.

Verberg een element visueel terwijl het toch beschikbaar blijft voor hulptechnologieën (zoals schermlezers) met .visually-hidden. Gebruik .visually-hidden-focusable om een element standaard visueel te verbergen, maar het weer te geven zodra het focus krijgt (bijv. door iemand die alleen het toetsenbord gebruikt). .visually-hidden-focusable kan ook op een container worden toegepast – dankzij :focus-within wordt de container weergegeven zodra een willekeurig kindelement van de container focus krijgt.

HTML

<h2 class="visually-hidden">Titel voor schermlezers</h2>
<a class="visually-hidden-focusable" href="#content">Ga naar de hoofdinhoud</a>
<div class="visually-hidden-focusable">Een container met een <a href="#">focusbaar element</a>.</div>

Zowel visually-hidden als visually-hidden-focusable kunnen ook als mixin worden gebruikt.

SCSS

// Gebruik als mixin

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

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