Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
Check
in English

Visuell verstoppt

Benotzt dës Helfer fir visuell Elementer ze verstoppen awer halen se zougänglech fir Hëllefstechnologien.

Visuell verstoppen en Element an et erlaabt et nach ëmmer mat Hëllefstechnologien (wéi Écran Lieser) mat .visually-hidden. Benotzt .visually-hidden-focusablefir en Element als Standard visuell ze verstoppen, awer fir et ze weisen wann et fokusséiert ass (zB vun engem Keyboard-nëmmen Benotzer). .visually-hidden-focusablekann och op e Container applizéiert ginn - dank :focus-within, de Container gëtt ugewisen wann all Kand Element vum Container Fokus kritt.

Wiesselt op den Haaptinhalt
E Container mat engem fokusséierbare 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>

Béid visually-hiddena visually-hidden-focusablekënnen och als Mixins benotzt ginn.

// Usage as a mixin

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

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