दृष्यदृष्ट्या लपलेले

सोबत सहाय्यक तंत्रज्ञान (जसे की स्क्रीन रीडर) समोर येण्याची परवानगी देत ​​असताना घटक दृश्यमानपणे लपवा .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;
}