Перейти до основного вмісту Перейти до навігації документами
in English

Візуально прихований

Використовуйте ці помічники, щоб візуально приховати елементи, але залишити їх доступними для допоміжних технологій.

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

Перейти до основного вмісту
Контейнер з фокусним елементом . 
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>

Обидва visually-hiddenі visually-hidden-focusableтакож можуть використовуватися як міксини.

// Usage as a mixin

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

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