Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Visuaalselt peidetud

Kasutage neid abistajaid elementide visuaalseks peitmiseks, kuid hoidke need abitehnoloogiatele ligipääsetavana.

Peida element visuaalselt, võimaldades samal ajal seda abitehnoloogiatega (nt ekraanilugejad) kasutada .visually-hidden. Kasutage .visually-hidden-focusableelemendi visuaalseks peitmiseks vaikimisi, kuid selle kuvamiseks, kui see on fokuseeritud (nt ainult klaviatuuri kasutaja poolt). .visually-hidden-focusablesaab rakendada ka konteinerile – tänu rakendusele :focus-withinkuvatakse konteiner, kui mõni konteineri alamelement fookusesse saab.

Mine põhisisu juurde
Fokuseeritava elemendiga konteiner .
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>

Mõlemad visually-hiddenja visually-hidden-focusableneid saab kasutada ka segudena.

// Usage as a mixin

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

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