Негізгі мазмұнға өту Құжаттар шарлауына өту
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;
}