Cмотреть на GitHub

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

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

Вы можете визуально скрыть элемент, оставив при этом доступ к нему вспомогательным технологиям (например, программам чтения с экрана) с помощью .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;
}