Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Oculto visualmente

Utilice estos ayudantes para ocultar elementos visualmente, pero manténgalos accesibles para las tecnologías de asistencia.

Oculte visualmente un elemento y, al mismo tiempo, permita que esté expuesto a tecnologías de asistencia (como lectores de pantalla) con .visually-hidden. Úselo .visually-hidden-focusablepara ocultar visualmente un elemento de forma predeterminada, pero para mostrarlo cuando está enfocado (por ejemplo, por un usuario que solo usa el teclado). .visually-hidden-focusabletambién se puede aplicar a un contenedor; gracias a :focus-within, el contenedor se mostrará cuando cualquier elemento secundario del contenedor reciba el foco.

Saltar al contenido principal
Un contenedor con un elemento enfocable .
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-hiddeny visually-hidden-focusabletambién se pueden usar como mixins.

// Usage as a mixin

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

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