Visually Hidden
Oculta contenido visualmente manteniéndolo accesible para lectores de pantalla.
Vista previa
- Artículo uno
- Artículo dos
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Visually Hidden oculta contenido visualmente manteniéndolo accesible para lector de pantalla. Utiliza la técnica estándar de clip/overflow para eliminar contenido del diseño visual sin retirarlo del árbol de accesibilidad.
Uso
Visually Hidden tiene una sola parte Root. Envuelve cualquier contenido que deba ocultarse visualmente pero permanecer disponible para las tecnologías de asistencia.
import * as VisuallyHidden from "@solidiom/visually-hidden"
;<VisuallyHidden.Root>
<label>Búsqueda</label>
</VisuallyHidden.Root>Instalación
Instala el paquete con pnpm add @solidiom/visually-hidden. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children | JSX.Element | — | Contenido a ocultar visualmente. |
class | string | — | Clase CSS adicional para sobrescribir estilos. |
Estilos
Visually Hidden lleva los atributos data-scope="visually-hidden" y data-part="root". Se renderiza como un elemento <span> con estilos en línea para la técnica de recorte. Los estilos usan position: absolute, clip: rect(0, 0, 0, 0), white-space: nowrap, width: 1px, height: 1px y overflow: hidden para asegurar que el contenido sea completamente invisible mientras permanece en el flujo del documento para las tecnologías de asistencia.
Interacción con teclado
Este primitivo no tiene interacción con teclado. Renderiza contenido estático que no recibe foco ni responde a eventos de teclado.
Renderizado SSR e hidratación
Visually Hidden es un elemento de presentación pasivo sin estado interactivo. Se renderiza como HTML estático y no requiere hidratación en el cliente.