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