દૃષ્ટિથી છુપાયેલ

સહાયક ટેક્નોલોજીઓ (જેમ કે સ્ક્રીન રીડર્સ) સાથે સંપર્કમાં આવવાની મંજૂરી આપતી વખતે તત્વને દૃષ્ટિની રીતે છુપાવો .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;
}