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

Vizualno skrito

S temi pomočniki 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 .
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>

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;
}