په بصری توګه پټ شوی

په لید کې یو عنصر پټ کړئ پداسې حال کې چې لاهم اجازه ورکوي چې د مرستندویه ټیکنالوژیو (لکه د سکرین لوستونکي) سره ښکاره شي .visually-hidden. د ډیفالټ په واسطه د یو عنصر لید پټولو لپاره وکاروئ .visually-hidden-focusable، مګر د ښودلو لپاره کله چې تمرکز وي (د مثال په توګه د کیبورډ یوازې کارونکي لخوا). .visually-hidden-focusableپه یو کانټینر کې هم پلي کیدی شي – مننه :focus-within، کانټینر به هغه وخت ښکاره شي کله چې د کانټینر کوم ماشوم عنصر تمرکز ترلاسه کړي.

<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>

دواړه visually-hiddenاو visually-hidden-focusableد مخلوط په توګه هم کارول کیدی شي.

// Usage as a mixin

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

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