Տեսողականորեն թաքնված

Տեսողականորեն թաքցրեք տարրը՝ միաժամանակ թույլ տալով, որ այն ենթարկվի օժանդակ տեխնոլոգիաներին (օրինակ՝ էկրանի ընթերցողներին) .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;
}