Ir ao contido principal Ir á navegación de documentos
in English

Visualmente oculto

Usa estes axudantes para ocultar visualmente elementos pero manténos accesibles ás tecnoloxías de asistencia.

Oculta visualmente un elemento mentres permite que estea exposto a tecnoloxías de asistencia (como lectores de pantalla) con .visually-hidden. Utilízao .visually-hidden-focusablepara ocultar visualmente un elemento por defecto, pero para mostralo cando está enfocado (por exemplo, por un usuario só con teclado). .visually-hidden-focusabletamén se pode aplicar a un contenedor; grazas a :focus-within, o contenedor mostrarase cando algún elemento fillo do contenedor reciba o foco.

Ir ao contido principal
Un recipiente cun elemento enfocable . 
<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-focusabletamén se poden usar como mixins.

// Usage as a mixin

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

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