ദൃശ്യപരമായി മറച്ചിരിക്കുന്നു

ഉപയോഗിച്ച് സഹായകമായ സാങ്കേതികവിദ്യകളിലേക്ക് (സ്ക്രീൻ റീഡറുകൾ പോലുള്ളവ) തുറന്നുകാട്ടാൻ അനുവദിക്കുമ്പോൾ തന്നെ ഒരു ഘടകം ദൃശ്യപരമായി മറയ്ക്കുക .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;
}