BetaBeta pública — Consulta las notas de lanzamiento
Solidiom
Comenzar
Documentación

Visually Hidden

Ejemplo de etiqueta solo para lectores de pantalla.

Paquete
@solidiom/visually-hidden
Versión
0.0.1-next.0
Estado
stable

Ejemplos

import * as VisuallyHidden from "@solidiom/visually-hidden"

;<button>
  <VisuallyHidden.Root>Cerrar diálogo</VisuallyHidden.Root>
  <span aria-hidden="true">&times;</span>
</button>

Encabezado oculto

Usa Visually Hidden para proporcionar encabezados a los lector de pantalla que den estructura sin desorden visual.

;<article>
  <VisuallyHidden.Root>
    <h2>Artículos Relacionados</h2>
  </VisuallyHidden.Root>
  <ul>
    <li>Artículo uno</li>
    <li>Artículo dos</li>
  </ul>
</article>

Instrucciones de campos de formulario

Oculta instrucciones verbosas de campos de formulario visualmente mientras las mantienes accesibles para lector de pantalla.

;<label>
  <VisuallyHidden.Root>Ingresa tu dirección de correo electrónico</VisuallyHidden.Root>
  <input type="email" placeholder="Correo" />
</label>
Cerrar diálogo

Artículos relacionados

  • Artículo uno
  • Artículo dos
Ver código fuente
        export function Root(props: VisuallyHiddenProps) {
  return (
    <span
      class={props.class}
      style={visuallyHiddenStyles}
      {...applySemanticAttrs({ scope: "visually-hidden", part: "root" })}
    >
      {props.children}
    </span>
  )
}