Acessibilidade e números

Contraste, cor, alternativa em texto e números em pt-BR

Regras

Gráfico acessível

Um gráfico precisa ser lido por quem não distingue cores, por quem usa leitor de tela e por quem navega pelo teclado.

Regra	Como aplicar
Contraste de 3:1 para o que é desenhado	Linhas, barras, fatias e pontos precisam de 3:1 contra o fundo (WCAG 1.4.11). Em barras com gradiente, vale também para a parte mais clara; se ela não alcançar, use uma borda.
Contraste de 4,5:1 para o que é texto	Rótulos dos eixos, valores, legenda e títulos seguem o contraste de texto, como o resto da interface.
Cor nunca é o único sinal	Diferencie séries também por rótulo direto, legenda com texto ou traço (a mediana é tracejada). Cerca de 1 em cada 12 homens tem alguma deficiência na visão de cores.
Todo gráfico tem alternativa em texto	Um título que diz o que é medido, um resumo de uma ou duas frases com a principal leitura e, sempre que possível, os dados em tabela.
Nada essencial só no tooltip	O tooltip abre também com o foco do teclado. Valores que a pessoa precisa ler ficam visíveis no gráfico ou na tabela.
Teclado chega aos dados	No Recharts, ative a prop accessibilityLayer, que permite percorrer os pontos com as setas.
Movimento respeita a preferência	Desligue a animação de entrada quando a pessoa pede movimento reduzido (prefers-reduced-motion).

Alternativa em texto num SVG

grafico.html

<figure>
  <svg role="img" aria-labelledby="titulo-casos resumo-casos">…</svg>
  <figcaption>
    <p id="titulo-casos">Casos de dengue por semana, Brasil, 2026</p>
    <p id="resumo-casos">Os casos subiram por seis semanas e caíram 30% nas últimas duas.</p>
  </figcaption>
</figure>

Números

Números e datas em pt-BR

Ponto separa milhar e vírgula separa decimal. Em eixos e indicadores, use a forma compacta ("12 mil"). Formate com Intl, que já vem no navegador, em vez de montar o texto à mão.

Valor	Formato	Resultado
`1234567.89`	Número completo	1.234.567,89
`12000`	Compacto	12 mil
`1500000`	Compacto	1,5 mi
`2300000000`	Compacto	2,3 bi
`0.123`	Variação percentual	+12,3%
`2026-05-15`	Mês no eixo	mai.
`2026-05-15`	Mês e ano	maio de 2026

formatos.ts

export const numero = new Intl.NumberFormat('pt-BR');
export const compacto = new Intl.NumberFormat('pt-BR', { notation: 'compact', maximumFractionDigits: 1 });
export const variacao = new Intl.NumberFormat('pt-BR', { style: 'percent', maximumFractionDigits: 1, signDisplay: 'exceptZero' });
export const mes = new Intl.DateTimeFormat('pt-BR', { month: 'short' });

compacto.format(12000); // "12 mil"
variacao.format(0.123); // "+12,3%"