Blocos de Gráfico: Gráficos Acessíveis com Eixos Honestos

Um bloco de gráfico é uma exibição de dados delimitada que combina um gráfico com sua conclusão, título, rótulos, fonte, período e alternativa de dados acessível. Use-o quando a forma dos dados responder à pergunta mais rápido do que uma linha de valores exatos.

Por que este elemento é importante

Gráficos exploram o reconhecimento visual de padrões. Um leitor pode detectar uma subida, lacuna, agrupamento ou mudança de inclinação antes de comparar os mesmos valores célula por célula. Isso ajuda quando o padrão — e não a consulta precisa — é o objetivo. Também é perigoso: eixos cortados, intervalos desiguais ou efeitos de área podem fazer uma pequena diferença parecer decisiva. Um gráfico merece seu lugar apenas quando reduz o esforço sem alterar a evidência.

A psicologia do leitor torna a conclusão escrita essencial. As pessoas podem lembrar de uma direção ou tamanho relativo mais prontamente do que de uma nota de rodapé. Declare a conclusão delimitada em texto, incluindo a população e o período quando necessário. Nunca afirme causalidade a partir de correlação ou uma tendência geral a partir de um intervalo selecionado.

A extraibilidade por máquinas exige nomes de séries, rótulos, valores, unidades, fonte, período e conclusão como texto. Um rastreador ou mecanismo de resposta de IA pode não interpretar um caminho SVG, canvas, captura de tela, estado de hover ou legenda de cores. O bloco portanto emparelha o visual com dados ordenados para tecnologia assistiva, indexação, verificação e reutilização.

As regras de escrita de elementos têm precedência: selecione este elemento porque o propósito de uma passagem é revelar um padrão quantitativo, não porque um gráfico decoraria a página. Se a tarefa é consulta exata ou comparação item por item, use uma tabela mesmo quando software de gráficos estiver disponível.

Quando usar

Use um gráfico quando o leitor precisar ver uma de quatro formas: mudança ao longo de uma sequência ordenada, diferenças entre um conjunto gerenciável de categorias, a distribuição de observações, ou a relação entre duas variáveis quantitativas. Um gráfico de linhas pode revelar direção ao longo do tempo; um gráfico de barras pode classificar categorias; um histograma pode revelar distribuição; e um gráfico de dispersão pode revelar associação e valores atípicos. O conjunto de dados deve ser completo o suficiente, medido consistentemente e relevante para a afirmação.

Um teste simples separa gráfico de tabela: se o leitor deve primeiro notar um padrão, escolha um gráfico; se deve encontrar um valor exato, escolha uma tabela. Se ambos importam, inclua uma tabela compacta dentro do bloco de gráfico para que as duas saídas não divirjam.

Equívocos comuns incluem:

• Dois valores: escreva uma frase ou pequena comparação. Duas barras raramente revelam um padrão mais diretamente.
• Uma longa lista de categorias: use uma tabela agrupada. Trinta barras criam problemas de rótulos e layout móvel.
• Algumas métricas principais: use uma faixa de estatísticas quando os números são destaques independentes em vez de uma série.
• Um processo ou cronologia: use uma linha do tempo quando as marcas não codificam quantidade.
• Uma afirmação causal a partir de uma associação: um gráfico de dispersão pode mostrar que duas variáveis se movem juntas; não pode estabelecer que uma causou a outra.
• Uma “história de dados” decorativa: se remover o gráfico não perde nenhuma conclusão, remova-o.
• Uma comparação com critérios qualitativos longos: use uma tabela de comparação porque categorias como política de suporte ou ajuste de implementação não podem ser codificadas honestamente como comprimento de barra.

Onde posicionar

Posicione o gráfico após o parágrafo que introduz a pergunta, população, medida e período. Coloque a conclusão diretamente antes ou depois dele, então explique implicações e limitações. Em pesquisa, cada gráfico pertence junto à sua descoberta. Em um estudo de caso, estabeleça a linha de base e a intervenção antes de mostrar mudança.

Mantenha o título, visual, legenda, conclusão, alternativa de dados, fonte e notas dentro de um limite de figura. Notas de rodapé podem seguir a figura, mas um anúncio, formulário de inscrição ou imagem não relacionada não pode interrompê-la. A fonte deve estar visível sem abrir a alternativa de dados.

Não o posicione ao lado de um gráfico igualmente proeminente, uma tabela independente ou faixa de estatísticas que repita seus dados, uma tabela de preços, carrossel ou chamada para ação de alta ênfase. Esses emparelhamentos competem ou criam múltiplas fontes de verdade. Separe exibições de dados com explicação.

Anatomia

A captura de tela legendada deve identificar estas regiões:

1. Conclusão: uma frase declarando o padrão sem a imagem.
2. Título da figura: uma descrição neutra da medida, população e período.
3. Gráfico: a região onde posição, comprimento ou direção codifica valores.
4. Eixos e escalas: rótulos visíveis, unidades, marcas, intervalos e linha de base.
5. Rótulos de séries: rótulos diretos quando possível; caso contrário, uma legenda que não seja apenas de cor.
6. Anotação: uma nota opcional vinculada a um ponto de dado, nunca um substituto de metodologia.
7. Alternativa de dados: uma tabela ou texto ordenado contendo os valores plotados.
8. Legenda e fonte: escopo, proveniência, período de relato e qualquer nota de cálculo.

Exemplos de design

Cada variante usa marcas bidimensionais, unidades visíveis, uma conclusão, dados de origem e uma alternativa acessível. Não há variante 3D, pictograma, medidor ou eixo duplo porque decoração e escalas concorrentes distorcem a comparação.

Gráfico de linhas: use para valores medidos em intervalos ordenados consistentes, geralmente tempo. Observações ausentes devem aparecer como lacunas em vez de conexões inventadas. Mais de quatro séries normalmente exige dividir o gráfico ou escolher uma tabela.

Gráfico de barras: use para comparação ou classificação entre categorias discretas. Comece o eixo quantitativo em zero porque o comprimento da barra representa magnitude. Prefira barras horizontais quando os rótulos são longos, e ordene por valor a menos que uma ordem natural tenha significado.

Gráfico de dispersão: use para a relação entre duas variáveis quantitativas. Mostre observações individuais, nomeie ambas as medidas, divulgue qualquer linha de tendência ajustada e evite linguagem causal a menos que o desenho de pesquisa a suporte.

Gráfico de barras empilhadas: use quando tanto o total quanto a composição importam em um pequeno número de grupos. Mantenha a ordem dos segmentos estável e limite a pilha a quatro categorias. Se os leitores precisam principalmente comparar cada componente, use barras agrupadas ou pequenos múltiplos.

Parâmetros

“Fonte” abaixo significa a localização autoral da qual o renderizador obtém o campo, não o provedor de evidência citado pelo gráfico.

show-data=false é permitido apenas quando uma tabela de dados equivalente ou alternativa textual completa valor por valor já está programaticamente associada à figura. Nunca é uma licença para publicar um gráfico apenas visual.

Sintaxe e exemplos de código

As três notações preservam o mesmo título, conclusão, conjunto de dados, escala, fonte, período e texto alternativo. As figuras são ilustrativas.

Diretiva Markdown portátil

:::chart-block{type=bar y-label="Solicitações" y-min=0 source="Conjunto de dados editorial ilustrativo" period="2026 T1–T4" alt="As solicitações diminuem em cada trimestre, de 120 no T1 para 72 no T4."}
## Solicitações de suporte ilustrativas por trimestre

Conclusão: As solicitações diminuem a cada trimestre, de 120 no T1 para 72 no T4.

| Trimestre | Solicitações |
|---:|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
:::

O primeiro título mapeia para title; a conclusão e a tabela de dados canônica mapeiam para campos do corpo.

Shortcode Hugo

O adaptador Hugo usa parâmetros nomeados e deriva o visual e a tabela de um conjunto de dados do corpo. Esta notação especifica o mapeamento pretendido.

{{< chart-block type="bar" yLabel="Solicitações" yMin="0" source="Conjunto de dados editorial ilustrativo" period="2026 T1–T4" alt="As solicitações diminuem em cada trimestre, de 120 no T1 para 72 no T4." >}}
## Solicitações de suporte ilustrativas por trimestre

Conclusão: As solicitações diminuem a cada trimestre, de 120 no T1 para 72 no T4.

| Trimestre | Solicitações |
|---:|---:|
| T1 | 120 |
| T2 | 108 |
| T3 | 84 |
| T4 | 72 |
{{< /chart-block >}}

Bloco WordPress

<!-- wp:amicited/chart-block {"type":"bar","title":"Solicitações de suporte ilustrativas por trimestre","yLabel":"Solicitações","yMin":0,"source":"Conjunto de dados editorial ilustrativo","period":"2026 T1–T4","alt":"As solicitações diminuem em cada trimestre, de 120 no T1 para 72 no T4.","takeaway":"As solicitações diminuem a cada trimestre, de 120 no T1 para 72 no T4."} -->
<table><thead><tr><th>Trimestre</th><th>Solicitações</th></tr></thead><tbody><tr><th>T1</th><td>120</td></tr><tr><th>T2</th><td>108</td></tr><tr><th>T3</th><td>84</td></tr><tr><th>T4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

O bloco pode renderizar SVG ou canvas, mas a saída salva e renderizada no servidor deve reter a conclusão e a tabela. JavaScript pode aprimorar a interação, nunca fornecer os únicos rótulos ou valores.

Exemplos

Bom: o visual e as palavras contam a mesma história delimitada

Conclusão: No conjunto de dados ilustrativo, o tempo mediano de resolução cai de 18 horas em janeiro para 12 horas em abril; o gráfico não estabelece por quê.

O gráfico de linhas usa intervalos mensais uniformes e um eixo “Horas” rotulado de 10 a 20. Essa escala de linha não-zero divulgada é apropriada porque posição, não comprimento de barra, codifica valores. A tabela expõe cada ponto, e o texto não atribui o declínio a uma intervenção.

Ruim: o gráfico fabrica urgência

Um gráfico de barras intitulado “Tempo de resolução despenca após lançamento” mostra os mesmos valores de 18, 17, 14 e 12 horas em um eixo que começa em 11,5. As barras parecem encolher quase a nada. Janeiro é rotulado como “antes”, abril como “depois”, os meses intermediários são ocultos atrás de hover, e nem a data da intervenção nem uma fonte são mostradas. A cor vermelho-para-verde fornece o único significado de desempenho.

Isso falha porque barras exigem uma linha de base zero, o título afirma causalidade, e rótulos seletivos impedem verificação. Valores apenas em hover excluem contextos de teclado, toque, extração e tecnologia assistiva. Repare com uma linha de base zero ou escala de linha claramente definida, toda observação, fonte, período, tabela de dados e uma conclusão não causal.

Marcação Schema e acessibilidade

Schema.org não tem um tipo geral Chart ou Graph. Um gráfico permanece evidência dentro de uma entidade elegível no nível da página, como Article, Report ou Dataset. Pesquisa pode descrever um conjunto de dados real baixável com propriedades como cobertura temporal, variáveis, criador e distribuição. Nunca invente uma propriedade de conjunto de dados, avaliação, tendência ou resultado porque um gráfico existe.

Acessibilidade exige mais do que texto alternativo. Dê à figura um título e legenda e a um SVG um nome e descrição acessíveis. Canvas precisa de uma representação DOM equivalente. Forneça valores plotados em uma tabela com cabeçalhos reais, e mantenha a conclusão fora do gráfico para que sobreviva à impressão, extração e falha de imagem.

Não use cor como o único identificador de série; adicione rótulos diretos, padrões de linha, formas de ponto ou texto. Dicas de ferramenta devem ser acessíveis por teclado, dispensáveis e suplementares. Com zoom de 200% e larguras estreitas, refluir ou rolar uma região de gráfico rotulada sem criar rolagem no nível da página.

Respeite preferências de movimento reduzido e evite desenho animado ou transições automáticas. Se filtros alteram dados, anuncie o estado e mostre filtros ativos em texto. Um gráfico estático não é um alvo de teclado a menos que tenha controles reais.

Regras de escrita

Estas regras mantêm a autoridade visual do gráfico proporcional à sua evidência:

• Escreva uma conclusão de 15–35 palavras. Nomeie a direção ou relação, pontos finais relevantes, população e período quando eles prevenirem ambiguidade.
• Use 2–20 pontos por série e no máximo quatro séries. Divida trabalhos mais densos em pequenos múltiplos, uma tabela ou um conjunto de dados baixável.
• Mantenha títulos entre 5–16 palavras e rótulos entre 1–6 palavras. Títulos descrevem; conclusões concluem.
• Use a mesma unidade e definição de medição ao longo de uma série. Se um método mudar, quebre a linha e explique a descontinuidade.
• Comece os eixos quantitativos de barras e barras empilhadas em zero. Uma escala de linha ou dispersão pode ser mais estreita apenas quando limites e unidades permanecem visíveis e a escolha não exagera ruído.
• Use espaçamento visual igual para intervalos numéricos ou de tempo iguais. Não espaçe fevereiro e dezembro como se fossem meses adjacentes quando períodos intermediários estão faltando.
• Mostre valores ausentes como ausentes. Nunca os converta em zero, conecte através deles silenciosamente ou interpole sem um método declarado.
• Rotule projeções, estimativas, valores modelados e valores ajustados sazonalmente diretamente. Não os estilize como dados observados.
• Evite eixos duplos, efeitos 3D, perspectiva, escala de área pictórica, eixos quebrados, paletas de arco-íris e curvas suavizadas que implicam valores não medidos.
• Declare a fonte, período de cobertura, amostra ou coorte quando relevante, e qualquer transformação como indexação, normalização ou média móvel.
• Nunca coloque uma chamada para ação, depoimento, selo promocional, afirmação causal não suportada ou ressalva essencial apenas dentro da imagem.
• Derive o gráfico e sua tabela de um conjunto de dados canônico. Se os valores mudarem, atualize uma vez e regenere ambas as saídas.

Metodologia detalhada e citações podem continuar em um bloco de fontes próximo, mas o gráfico ainda precisa de uma fonte visível e período próprios.

Tipos de post que o utilizam

O campo postTypes no frontmatter define os relacionamentos aprovados abaixo. A inclusão permite um gráfico quando um padrão quantitativo real existe; não exige que autores fabriquem um gráfico para toda página.

Checklist de QA

• A tarefa principal do leitor é ver um padrão; consulta exata isolada seria melhor atendida por uma tabela.
• A conclusão é uma frase completa em texto HTML, concorda com os dados plotados e permanece dentro da evidência.
• O título nomeia a medida, população e período necessários para entender a figura.
• O tipo de gráfico corresponde à tarefa analítica: sequência, comparação de categorias, distribuição ou relação.
• As linhas de base das barras começam em zero; toda outra escala é visível, justificada e não enganosa.
• Intervalos, unidades, denominadores, cálculos e valores ausentes são representados honestamente.
• As séries são diretamente rotuladas ou distinguíveis sem cor apenas.
• Todo valor essencial está disponível sem hover, JavaScript, animação ou interpretação de imagem.
• Uma tabela de dados ou alternativa textual completa usa cabeçalhos reais e corresponde exatamente ao visual.
• A fonte, período de cobertura, coorte ou amostra e transformações estão visíveis junto ao gráfico.
• O gráfico e a alternativa acessível derivam de um conjunto de dados canônico.
• O bloco não está ao lado de uma exibição de dados duplicada, módulo de conversão ou visual concorrente de alta ênfase.
• O gráfico funciona com entrada de teclado, configurações de alto contraste, zoom de 200%, telas estreitas e movimento reduzido.
• Nenhum efeito 3D, eixo duplo, eixo quebrado, escala pictórica, afirmação causal não suportada ou série decorativa permanece.
• Qualquer dado estruturado no nível da página é elegível e consistente com a evidência visível.
• O tipo de post selecionado inclui o bloco de gráfico em seu contrato de conteúdo.

FAQ

Quando devo usar um gráfico em vez de uma tabela?

Use um gráfico quando a primeira tarefa for ver uma tendência, distribuição, classificação ou relação. Use uma tabela quando leitores precisarem de consulta precisa entre muitos campos. Quando ambas as tarefas importam, mantenha uma tabela compacta dentro do bloco de gráfico como sua alternativa de dados acessível.

Um gráfico de barras deve começar em zero?

Sim. O comprimento da barra representa magnitude a partir de uma linha de base, portanto cortar essa linha de base altera a proporção aparente. Um gráfico de linhas pode usar uma escala não-zero quando o intervalo visível e as unidades são explícitos e a visão mais estreita é analiticamente necessária.

O texto alternativo é suficiente para tornar um gráfico acessível?

Geralmente não. O texto alternativo deve identificar a exibição e resumir seu padrão principal. Um gráfico com vários valores também precisa de uma tabela de dados próxima ou texto equivalente contendo os rótulos, valores, unidades, fonte e período.

A conclusão pode aparecer apenas no título do gráfico?

Não. Um título identifica o que a figura mostra; uma conclusão declara o que o leitor deve notar. Mantenha a conclusão como uma frase completa fora do gráfico para que permaneça disponível quando a imagem não for percebida ou extraída.

Um bloco de gráfico cria marcação Schema.org?

Não. Use marcação válida no nível da página como Article, Report ou Dataset apenas quando a página se qualificar independentemente. O gráfico não cria uma nova permissão de schema nem justifica declarações estruturadas ausentes da evidência visível.