मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
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;
}