VisuallyHidden
Texto que no se muestra en pantalla, pero lo leen los lectores de pantalla. Completa lo que ya indica la posición en la página para las personas con visión.
En esta página
Playground
Ver como
Fondo
<label class="feitio-stack" data-gap="2" style="inline-size: min(100%, 20rem)"><span class="feitio-visually-hidden">Filtrar</span><input class="feitio-input" type="search" placeholder="…"></label>Cuándo usarlo
- Para dar al contexto lo que obtiene el ojo de la posición: "Editar copia semanal" en un botón "Editar" dentro de una fila de tabla.
Cuándo no usarlo
- Para ocultar algo de todos: usa el atributo
hidden. - Para texto que todos deberían leer: si ayuda a los lectores de pantalla, casi siempre ayuda a todos. Muestra lo.
Ejemplos
Weekly backup
El nombre completo de una acción
Las personas con visión entienden desde la fila; el lector de pantalla escucha "Editar copia semanal".
Mostrar código
<button type="button" class="feitio-button" data-size="small">
Editar<span class="feitio-visually-hidden"> backup semanal</span>
</button>Hacer y no hacer
Do
"Editar" con el nombre de la fila oculto.
Contexto que solo el lector de pantalla estaba perdiendo.
Don’t
"Guardar antes de irse" oculto, solo para lectores de pantalla.
Una notificación que solo obtienen los lectores de pantalla: las personas con visión también la necesitaban.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-visually-hidden" | obligatorio | Desaparece de la pantalla y permanece para los lectores de pantalla. |