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-focusable
upang 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-focusable
maaari 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.
Pamagat para sa mga screen reader
Lumaktaw sa pangunahing nilalaman<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-hidden
at visually-hidden-focusable
maaari ding gamitin bilang mixin.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}