दृष्टिगत रूप से छिपा हुआ

किसी तत्व को अभी भी .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;
}