in English
מוסתר ויזואלית
השתמש בעוזרים אלה כדי להסתיר אלמנטים ויזואלית אך לשמור אותם נגישים לטכנולוגיות מסייעות.
הסתרה ויזואלית של אלמנט ועדיין לאפשר לו להיחשף לטכנולוגיות מסייעות (כגון קוראי מסך) עם .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;
}