Accessibilità

Questa pagina descrive come funzionano le icone con screen reader, tastiera, input touch e impostazioni di riduzione del movimento.

Nomi accessibili

Senza title, un'icona ha aria-hidden e gli screen reader la saltano. Quando un'icona è l'unico contenuto di un pulsante o di un link, dai al controllo un nome accessibile, con aria-label sul controllo o con title sull'icona:

tsx

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

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

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

Il web component <kubai-icon> prende il nome accessibile dall'attributo label.

Input e animazione

Quando è attivo prefers-reduced-motion, le icone passano direttamente alla posa finale senza animazione.
Con trigger="parent", il focus da tastiera riproduce l'animazione come l'hover. Il focus rimasto dopo un clic del mouse no.
Sugli schermi touch un tocco riproduce l'animazione in avanti e poi a ritroso. Le icone a interruttore cambiano invece stato.
Le icone a interruttore come Bookmark mostrano il loro stato solo con colore e forma. Aggiungi testo visibile accanto all'icona oppure imposta aria-pressed sul pulsante, così gli screen reader possono annunciare lo stato.