Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

Görsel olarak gizli

Öğeleri görsel olarak gizlemek için bu yardımcıları kullanın, ancak bunları yardımcı teknolojiler için erişilebilir tutun.

ile yardımcı teknolojilere (ekran okuyucular gibi) maruz kalmasına izin verirken bir öğeyi görsel olarak gizleyin .visually-hidden. .visually-hidden-focusableVarsayılan olarak bir öğeyi görsel olarak gizlemek, ancak odaklandığında (örneğin yalnızca klavye kullanan bir kullanıcı tarafından) görüntülemek için kullanın . .visually-hidden-focusablekapsayıcıya da uygulanabilir; sayesinde :focus-withinkapsayıcı, kapsayıcının herhangi bir alt öğesi odak aldığında görüntülenecektir.

Ekran okuyucular için başlık

Ana içeriğe geç
Odaklanabilir öğeye sahip bir kapsayıcı .
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>

Her ikisi de karışım olarak visually-hiddenda visually-hidden-focusablekullanılabilir.

// Usage as a mixin

.visually-hidden-title {
  @include visually-hidden;
}

.skip-navigation {
  @include visually-hidden-focusable;
}