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

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

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

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

Title for screen readers

Skip to main content
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
// Usage as a mixin

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

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