Негизги мазмунга өтүү Документтердин навигациясына өтүү
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;
}