Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

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

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

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

Skip to main content 
<h2 class="visually-hidden">Заголовок для программ чтения с экрана</h2>
<a class="visually-hidden-focusable" href="#content">Перейти к основному содержанию</a>
// Usage as a mixin

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

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