ଭିଜୁଆଲ୍ ଲୁକ୍କାୟିତ |

ଏକ ଉପାଦାନକୁ ଭିଜୁଆଲ୍ ଲୁଚାନ୍ତୁ ଯେତେବେଳେ ମଧ୍ୟ ଏହାକୁ ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟା (ଯେପରିକି ସ୍କ୍ରିନ୍ ରିଡର୍) ସହିତ ପ୍ରକାଶ କରିବାକୁ ଅନୁମତି ଦିଏ .visually-hidden| ଡିଫଲ୍ଟ ଭାବରେ ଏକ ଉପାଦାନକୁ ଭିଜୁଆଲ୍ ଲୁଚାଇବା ପାଇଁ ବ୍ୟବହାର କରନ୍ତୁ .visually-hidden-focusable, କିନ୍ତୁ ଯେତେବେଳେ ଏହା ଫୋକସ୍ ହୁଏ ଏହାକୁ ପ୍ରଦର୍ଶନ କରିବାକୁ ବ୍ୟବହାର କରନ୍ତୁ (ଉଦାହରଣ ସ୍ୱରୂପ କେବଳ କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀ ଦ୍ୱାରା) | .visually-hidden-focusableଏକ ପାତ୍ରରେ ମଧ୍ୟ ପ୍ରୟୋଗ କରାଯାଇପାରିବ - ଧନ୍ୟବାଦ :focus-within, ପାତ୍ରର ଯେକ child ଣସି ଶିଶୁ ଉପାଦାନ ଧ୍ୟାନ ଗ୍ରହଣ କଲାବେଳେ ପାତ୍ରଟି ପ୍ରଦର୍ଶିତ ହେବ |

<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;
}