Ir ao contido principal Ir á navegación de documentos
Check
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 .
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-focusabletamén se poden usar como mixins.

// Usage as a mixin

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

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