দৃশ্যত লুকানো

সহকারী প্রযুক্তির (যেমন স্ক্রিন রিডার) সাথে এটিকে প্রকাশ করার অনুমতি দেওয়ার সময় একটি উপাদানকে দৃশ্যত লুকান .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এছাড়াও mixins হিসাবে ব্যবহার করা যেতে পারে.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}