Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
Check
in English

Vizuāli paslēpts

Izmantojiet šos palīgus, lai vizuāli paslēptu elementus, bet saglabātu tos pieejamus palīgtehnoloģijām.

Vizuāli paslēpiet elementu, vienlaikus ļaujot tam pakļaut palīgtehnoloģijas (piemēram, ekrāna lasītājus), izmantojot .visually-hidden. Izmantojiet .visually-hidden-focusable, lai vizuāli paslēptu elementu pēc noklusējuma, bet parādītu to, kad tas ir fokusēts (piemēram, ja lietotājs izmanto tikai tastatūru). .visually-hidden-focusablevar lietot arī konteineram — pateicoties :focus-within, konteiners tiks parādīts, kad fokuss tiks parādīts kādam konteinera pakārtotajam elementam.

Pāriet uz galveno saturu
Konteiners ar fokusējamu 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>

Abi visually-hiddenun visually-hidden-focusablevar tikt izmantoti arī kā maisījumi.

// Usage as a mixin

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

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