Przejdź do głównej zawartości Przejdź do nawigacji w dokumentach
Check
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-focusablemożna również zastosować do kontenera – dzięki temu :focus-withinkontener zostanie wyświetlony, gdy dowolny element podrzędny kontenera zostanie aktywowany.

Przejdź do głównej zawartości
Pojemnik ze zogniskowanym elementem .
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>

Oba visually-hiddeni visually-hidden-focusablemogą być również używane jako mixiny.

// Usage as a mixin

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

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