דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

מוסתר ויזואלית

השתמש בעוזרים אלה כדי להסתיר אלמנטים ויזואלית אך לשמור אותם נגישים לטכנולוגיות מסייעות.

הסתרה ויזואלית של אלמנט ועדיין לאפשר לו להיחשף לטכנולוגיות מסייעות (כגון קוראי מסך) עם .visually-hidden. השתמש .visually-hidden-focusableכדי להסתיר אלמנט באופן ויזואלי כברירת מחדל, אבל כדי להציג אותו כשהוא ממוקד (למשל על ידי משתמש המקלדת בלבד). .visually-hidden-focusableניתן להחיל גם על מיכל - הודות ל :focus-within, המיכל יוצג כאשר כל רכיב צאצא של המיכל יקבל פוקוס.

כותרת לקוראי מסך

דלג לתוכן הראשי
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>

גם visually-hiddenוגם visually-hidden-focusableיכול לשמש כמיקסינים.

// Usage as a mixin

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

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