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;
}