Acessibilidade

Esta página descreve como os ícones funcionam com leitores de tela, teclado, toque e configurações de movimento reduzido.

Nomes acessíveis

Sem title, o ícone fica aria-hidden e os leitores de tela o ignoram. Quando o ícone é o único conteúdo de um botão ou link, dê um nome acessível ao controle, com aria-label no controle ou com title no ícone:

tsx

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

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

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

O web component <kubai-icon> obtém o nome acessível do atributo label.

Entrada e movimento

Quando prefers-reduced-motion está ativo, os ícones vão direto para a pose final, sem animação.
Com trigger="parent", o foco do teclado reproduz o movimento como o hover. O foco que permanece após um clique do mouse não reproduz.
Em telas sensíveis ao toque, um toque reproduz o movimento para frente e para trás. Os ícones de alternância mudam de estado.
Ícones de alternância como Bookmark mostram o estado apenas por cor e forma. Adicione texto visível ao lado do ícone ou defina aria-pressed no botão, para que os leitores de tela possam anunciar o estado.