Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
in English

Visueel ferburgen

Brûk dizze helpers om eleminten visueel te ferbergjen, mar hâld se tagonklik foar assistinte technologyen.

Ferbergje in elemint fisueel, wylst it noch kin wurde bleatsteld oan assistive technologyen (lykas skermlêzers) mei .visually-hidden. Brûk .visually-hidden-focusableom standert visueel in elemint te ferbergjen, mar om it wer te jaan as it rjochte is (bygelyks troch in brûker allinich op it toetseboerd). .visually-hidden-focusablekin ek tapast wurde op in kontener - mei tank oan :focus-within, sil de kontener werjûn wurde as elk bernelemint fan 'e kontener fokus krijt.

Gean nei haadynhâld
In kontener mei in fokusber elemint .
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>

Beide visually-hiddenen visually-hidden-focusablekinne ek brûkt wurde as mixins.

// Usage as a mixin

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

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