Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Vizualiai paslėpta

Naudokite šiuos pagalbininkus, norėdami vizualiai paslėpti elementus, bet išlaikyti juos prieinamus pagalbinėms technologijoms.

Vizualiai paslėpkite elementą, kartu leisdami jam veikti pagalbinėms technologijoms (pvz., ekrano skaitytuvams) naudodami .visually-hidden. Naudokite .visually-hidden-focusablenorėdami vizualiai paslėpti elementą pagal numatytuosius nustatymus, bet rodyti jį, kai jis yra sufokusuotas (pvz., tik klaviatūros naudotojo). .visually-hidden-focusabletaip pat gali būti pritaikytas sudėtiniam rodiniui – dėka :focus-within, konteineris bus rodomas, kai bus sufokusuotas bet kuris antrinis sudėtinio rodinio elementas.

Pereiti prie pagrindinio turinio
Konteineris su fokusuojamu elementu .
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>

Abu visually-hiddenir visually-hidden-focusabletaip pat gali būti naudojami kaip mišiniai.

// Usage as a mixin

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

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