Chart accessibility · Casa Hacker DS

texto alternativo

01 · 1.1.1

Todo chart é uma <svg role="img" aria-label="descrição">. O aria-label conta a história, não a forma.

use

"vendas de jan a dez · alta consistente · setembro recorde com 580"
"alunos por região · sudeste lidera com 320 · norte menor 18"
Resumo informativo (não enumera valores)

não use

"gráfico de barras com 9 colunas"
"chart"
"figura ilustrativa"
Enumerar todos os valores (vira tabela falada)

tabular fallback

Pra leitores de tela e usuários que preferem dados crus, ofereça versão tabela. Pode ficar oculta visualmente (sr-only) ou em <details>.

▸ ver dados em tabela

mês	vendas
jan	45
fev	32
mar	60
abr	38

color-blind safe

03 · 1.4.1

Nossa paleta categórica foi testada em deuteranopia (verde-vermelho, ~5% da população masculina) e protanopia. Mesmo assim, sempre acompanhe cor com pattern, ícone ou label.

daltonismo	prevalência	o que vira
deuteranopia	5% (homens)	verde/vermelho indistinguíveis
protanopia	1%	vermelho parece marrom
tritanopia	<1%	azul/amarelo confusos
monocromacia	muito raro	tudo em tons de cinza

patterns como alternativa

Em bar/area stacked, use hachura (pattern fill SVG) pra distinguir além da cor.

bar com hachura

hachura distingue além da cor

contraste

05 · 1.4.3 / 1.4.11

Texto em chart: 4.5:1 contra fundo
Elementos gráficos (bars, lines, dots): 3:1 contra fundo
Axis labels: legíveis em ambos os temas
Tooltip: contraste alto sempre (--dv-tooltip-bg vs fg)

keyboard navigation

06 · 2.1.1

Quando chart é interativo: cada ponto/barra é focável via Tab. Setas navegam entre pontos da mesma série. Enter ativa drill-down. Esc sai do modo "explorando chart".

motion

07 · 2.3.3

Animações de entrada (barras crescendo, linhas desenhando) ≤ 700ms. Respeitar prefers-reduced-motion — desativa animação, mostra estado final.

checklist por chart

role="img" + aria-label descritivo no SVG
Tabular fallback disponível (visible ou sr-only)
Cor não é único portador de significado
Contraste de texto e elementos verificado
Funciona em high-contrast mode (testar via barra de acessibilidade)
Animação respeita prefers-reduced-motion
Quando interativo: 100% via teclado
Quando dinâmico (atualização real-time): aria-live em região fora do svg