දෘශ්යමය වශයෙන් සැඟවී ඇත

මූලද්‍රව්‍යයක් දෘශ්‍යමය වශයෙන් සඟවන්න, එය තවමත් සහායක තාක්‍ෂණයන්ට (තිර කියවනය වැනි) නිරාවරණය වීමට ඉඩ සලසමින් .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;
}