in English
Vizuálně skryté
Pomocí těchto pomocníků můžete vizuálně skrýt prvky, ale zachovat je přístupné pro pomocné technologie.
Vizuálně skryjte prvek a zároveň jej povolte vystavit pomocným technologiím (jako jsou čtečky obrazovky) pomocí .visually-hidden
. Slouží .visually-hidden-focusable
k vizuálnímu skrytí prvku ve výchozím nastavení, ale k jeho zobrazení, když je zaostřený (např. uživatelem používajícím pouze klávesnici). .visually-hidden-focusable
lze také použít na kontejner – díky :focus-within
, bude kontejner zobrazen, když bude aktivní jakýkoli podřízený prvek kontejneru.
<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
a visually-hidden-focusable
lze je také použít jako mixiny.
// Usage as a mixin
.visually-hidden-title {
@include visually-hidden;
}
.skip-navigation {
@include visually-hidden-focusable;
}