in English
ซ่อนเร้น 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;
}