Визуально скрытый

Используйте эти помощники, чтобы визуально скрыть элементы, но сохранить их доступными для вспомогательных технологий.

Визуально скройте элемент, при этом позволяя ему оставаться доступным для вспомогательных технологий (таких как программы чтения с экрана) с помощью .visually-hidden. Используйте .visually-hidden-focusable, чтобы визуально скрыть элемент по умолчанию, но отобразить его, когда он находится в фокусе (например, пользователем, работающим только с клавиатурой). .visually-hidden-focusable также может применяться к контейнеру — благодаря :focus-within, контейнер будет отображаться, когда любой дочерний элемент контейнера получает фокус.

html

<h2 class="visually-hidden">Заголовок для программ чтения с экрана</h2>
<a class="visually-hidden-focusable" href="#content">Перейти к основному содержимому</a>
<div class="visually-hidden-focusable">Контейнер с <a href="#">фокусируемым элементом</a>.</div>

Оба visually-hidden и visually-hidden-focusable также могут использоваться как миксины.

// Использование как миксин

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}