Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
Check
in English

Vizuelno skriveno

Koristite ove pomoćnike da vizualno sakrijete elemente, ali ih održite dostupnim pomoćnim tehnologijama.

Vizuelno sakrijte element dok i dalje dozvoljavate da bude izložen pomoćnim tehnologijama (kao što su čitači ekrana) pomoću .visually-hidden. Koristite .visually-hidden-focusableza vizuelno sakrivanje elementa prema zadanim postavkama, ali da ga prikažete kada je fokusiran (npr. od strane korisnika koji koristi samo tastaturu). .visually-hidden-focusablemože se primijeniti i na kontejner – zahvaljujući :focus-within, kontejner će biti prikazan kada bilo koji podređeni element kontejnera dobije fokus.

Preskoči na glavni sadržaj
Kontejner sa elementom koji se mož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>

Oboje visually-hiddeni visually-hidden-focusablemogu se koristiti i kao miksini.

// Usage as a mixin

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

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