Accessibilité

Cette page décrit le fonctionnement des icônes avec les lecteurs d’écran, le clavier, le tactile et les réglages de réduction des animations.

Noms accessibles

Sans title, une icône est aria-hidden et les lecteurs d’écran l’ignorent. Quand une icône est le seul contenu d’un bouton ou d’un lien, donnez un nom accessible au contrôle, soit avec aria-label sur le contrôle, soit avec title sur l’icône :

tsx

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

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

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

Le web component <kubai-icon> tire son nom accessible de l’attribut label.

Entrée et animation

Quand prefers-reduced-motion est activé, les icônes passent directement à la pose finale sans animation.
Avec trigger="parent", le focus clavier lance l’animation comme le survol. Le focus laissé par un clic de souris ne le fait pas.
Sur les écrans tactiles, un appui lance l’animation dans un sens puis dans l’autre. Les icônes à bascule changent d’état à la place.
Les icônes à bascule comme Bookmark n’indiquent leur état que par la couleur et la forme. Ajoutez un texte visible à côté de l’icône, ou définissez aria-pressed sur le bouton, pour que les lecteurs d’écran puissent annoncer l’état.