Преминете към основното съдържание Преминете към навигацията с документи
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;
}