in English
Wizualnie ukryty
Użyj tych pomocników, aby wizualnie ukryć elementy, ale zachowaj ich dostępność dla technologii pomocniczych.
Wizualnie ukryj element, jednocześnie udostępniając go technologiom pomocniczym (takim jak czytniki ekranu) za pomocą .visually-hidden
. Użyj .visually-hidden-focusable
, aby wizualnie ukryć element domyślnie, ale aby wyświetlić go, gdy jest skupiony (np. przez użytkownika korzystającego tylko z klawiatury). .visually-hidden-focusable
można również zastosować do kontenera – dzięki temu :focus-within
kontener zostanie wyświetlony, gdy dowolny element podrzędny kontenera zostanie aktywowany.
<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>
Oba visually-hidden
i visually-hidden-focusable
mogą być również używane jako mixiny.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}