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-focusable
dit 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-focusable
kan ook worden toegepast op een container. Dankzij :focus-within
, wordt de container weergegeven wanneer een onderliggend element van de container de focus krijgt.
<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-hidden
en visually-hidden-focusable
kunnen ook als mixins worden gebruikt.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}