Төп эчтәлеккә күчү Документлар навигациясенә күчү
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;
}