Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
in English

Vizualno skrito

Uporabite te pomočnike, da vizualno skrijete elemente, vendar jih ohranite dostopne podpornim tehnologijam.

Vizualno skrijete element, hkrati pa mu omogočite, da je izpostavljen podpornim tehnologijam (kot so bralniki zaslona) .visually-hiddenz Uporabite .visually-hidden-focusable, da privzeto vizualno skrijete element, vendar ga prikažete, ko je fokusiran (npr. uporabnik, ki uporablja samo tipkovnico). .visually-hidden-focusablelahko uporabite tudi za vsebnik – zahvaljujoč :focus-within, bo vsebnik prikazan, ko kateri koli podrejeni element vsebnika prejme fokus.

Preskoči na glavno vsebino
Posoda z elementom , ki ga je mogoče fokusirati . 
<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>

Oba visually-hiddenin visually-hidden-focusablese lahko uporabljata tudi kot mixins.

// Usage as a mixin

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

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