Salta al contenuto principale Passa alla navigazione dei documenti
Check
in English

Visivamente nascosto

Usa questi aiutanti per nascondere visivamente gli elementi ma mantienili accessibili alle tecnologie assistive.

Nascondi visivamente un elemento consentendo comunque che sia esposto a tecnologie assistive (come lettori di schermo) con .visually-hidden. Utilizzare .visually-hidden-focusableper nascondere visivamente un elemento per impostazione predefinita, ma per visualizzarlo quando è focalizzato (ad esempio da un utente solo con la tastiera). .visually-hidden-focusablepuò essere applicato anche a un contenitore: grazie a :focus-within, il contenitore verrà visualizzato quando qualsiasi elemento figlio del contenitore riceve lo stato attivo.

Salta al contenuto principale
Un contenitore con un elemento focalizzabile .
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>

Entrambi visually-hiddene visually-hidden-focusablepossono anche essere usati come mixin.

// Usage as a mixin

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

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