দৃশ্যগতভাৱে লুকাই থকা

এটা উপাদান দৃশ্যমানভাৱে লুকুৱাওক আৰু তথাপিও ইয়াক সহায়ক প্ৰযুক্তিসমূহৰ সৈতে (যেনে পৰ্দা ৰিডাৰসমূহ) উন্মোচন কৰাৰ অনুমতি দিয়ক .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;
}