Gitago sa panan-aw
Gamita kini nga mga katabang aron makita nga itago ang mga elemento apan ipadayon kini nga magamit sa mga teknolohiya nga makatabang.
Biswal nga itago ang usa ka elemento samtang gitugotan pa kini nga ma-expose sa mga makatabang nga teknolohiya (sama sa mga screen reader) nga adunay .visually-hidden
. Gamita .visually-hidden-focusable
aron makita nga itago ang usa ka elemento pinaagi sa default, apan aron ipakita kini kung kini naka-focus (pananglitan sa usa ka keyboard-only user). .visually-hidden-focusable
mahimo usab nga i-apply sa usa ka sudlanan–salamat sa :focus-within
, ang sudlanan ipakita kung ang bisan unsang bata nga elemento sa sudlanan makadawat focus.
Titulo para sa screen readers
Laktawan sa panguna nga sulud<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>
Ang duha visually-hidden
ug visually-hidden-focusable
mahimo usab nga gamiton ingon mga mixin.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}