بصری طور پر پوشیدہ

کسی عنصر کو بصری طور پر چھپائیں جبکہ اسے معاون ٹیکنالوجیز (جیسے اسکرین ریڈرز) کے ساتھ سامنے آنے کی اجازت دیتے ہیں .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;
}