# 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.

## Playground

```html
<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

### 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

```html
<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.