ซ่อนเร้น Visual

ซ่อนองค์ประกอบด้วยสายตาในขณะที่ยังคงปล่อยให้สัมผัสกับเทคโนโลยีช่วยเหลือ (เช่น โปรแกรมอ่านหน้าจอ) ด้วย.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;
}