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