Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
in English

Biswal na nakatago

Gamitin ang mga katulong na ito upang biswal na itago ang mga elemento ngunit panatilihing naa-access ang mga ito sa mga pantulong na teknolohiya.

Biswal na itago ang isang elemento habang pinapayagan pa rin itong malantad sa mga pantulong na teknolohiya (gaya ng mga screen reader) gamit ang .visually-hidden. Gamitin .visually-hidden-focusableupang biswal na itago ang isang elemento bilang default, ngunit upang ipakita ito kapag ito ay nakatutok (hal ng isang keyboard-only na user). .visually-hidden-focusablemaaari ding ilapat sa isang lalagyan–salamat sa :focus-within, ang lalagyan ay ipapakita kapag ang anumang bata na elemento ng lalagyan ay nakatanggap ng focus.

Lumaktaw sa pangunahing nilalaman
Isang lalagyan na may nakatutok na elemento .
html 
<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>

Pareho visually-hiddenat visually-hidden-focusablemaaari ding gamitin bilang mixin.

// Usage as a mixin

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

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