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

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

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

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

// Использование в качестве миксина
.visually-hidden-title{@include visually-hidden;}.skip-navigation{@include visually-hidden-focusable;}