Ir para o conteúdo principal Pular para a navegação de documentos
Check
in English

Visualmente oculto

Use esses auxiliares para ocultar visualmente os elementos, mas mantenha-os acessíveis às tecnologias assistivas.

Oculte visualmente um elemento enquanto ainda permite que ele seja exposto a tecnologias assistivas (como leitores de tela) com .visually-hidden. Use .visually-hidden-focusablepara ocultar visualmente um elemento por padrão, mas para exibi-lo quando estiver focado (por exemplo, por um usuário apenas com teclado). .visually-hidden-focusabletambém pode ser aplicado a um contêiner – graças a :focus-within, o contêiner será exibido quando qualquer elemento filho do contêiner receber foco.

Ir para o conteúdo principal
Um contêiner com um elemento focalizável .
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>

Ambos visually-hiddene visually-hidden-focusabletambém podem ser usados ​​como mixins.

// Usage as a mixin

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

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