Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

Візуальна схаваны

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

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

Перайсці да асноўнага зместу
Кантэйнер з факусуемым элементам .
html 
<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;
}