Accesibilidad

Esta página describe cómo funcionan los iconos con los lectores de pantalla, el teclado, la entrada táctil y los ajustes de movimiento reducido.

Nombres accesibles

Sin title, un icono tiene aria-hidden y los lectores de pantalla lo omiten. Cuando un icono es el único contenido de un botón o enlace, da un nombre accesible al control, ya sea con aria-label en el control o con title en el icono:

tsx

import { Settings } from "kubai-icons-react";

<button aria-label="Settings"><Settings /></button>

<button><Settings title="Settings" /></button>

El componente web <kubai-icon> toma su nombre accesible del atributo label.

Entrada y movimiento

Si prefers-reduced-motion está activado, los iconos pasan directamente a la pose final sin animación.
Con trigger="parent", el foco del teclado reproduce el movimiento igual que al pasar el cursor. El foco que queda tras un clic del ratón no lo hace.
En las pantallas táctiles, un toque reproduce el movimiento hacia delante y hacia atrás. Los iconos de tipo interruptor cambian de estado.
Los iconos de tipo interruptor, como Bookmark, muestran su estado solo mediante el color y la forma. Añade texto visible junto al icono o define aria-pressed en el botón para que los lectores de pantalla puedan anunciar el estado.