# 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

```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

```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%"
```