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-focusable
Varsayı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-focusable
kapsayıcıya da uygulanabilir; sayesinde :focus-within
kapsayıcı, kapsayıcının herhangi bir alt öğesi odak aldığında görüntülenecektir.
<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-hidden
da visually-hidden-focusable
kullanılabilir.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}