दृश्यात्मक रूपमा लुकेको

सहयोगी टेक्नोलोजीहरू (जस्तै स्क्रिन रिडरहरू) सँगको सम्पर्कमा आउन अनुमति दिंदा कुनै तत्वलाई दृश्यात्मक रूपमा लुकाउनुहोस् .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;
}