Descrição para imagens complexas
O que a norma pede
Gráficos, infográficos, mapas e diagramas têm um texto alternativo que os identifica e uma descrição detalhada perto da imagem ou numa página indicada.
- 1.1.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Desenhe gráficos e mapas com espaço para uma descrição ou uma tabela com os mesmos dados, logo abaixo ou num “ver dados”. Prefira títulos de gráfico que já digam a conclusão.
Gráfico de atendimentos por mês
O relatório anual mostra atendimentos em um gráfico de barras.
Errado: Só o gráfico
No leiaute
Gráfico de barras sem legenda em texto nem tabela.
Os números ficam presos na imagem.
Certo: Gráfico e dados
No leiaute
Título “Atendimentos cresceram no segundo semestre” e botão “Ver os dados em tabela”.
Todos acessam os números.
Dê à imagem complexa um alt curto que a identifique e ligue a descrição completa a ela com figure e figcaption ou com aria-describedby. Em gráficos gerados por biblioteca, ofereça uma tabela HTML com os dados.
Infográfico do orçamento
Uma imagem mostra como o orçamento é dividido.
Errado: Tudo no alt
<img src="orcamento.png" alt="Saúde 30%, Educação 25%, … (20 itens)">O alt fica longo e difícil de ouvir.
Certo: Alt curto e descrição ligada
<figure> <img src="orcamento.png" alt="Divisão do orçamento de 2025"> <figcaption>Saúde recebe 30%, Educação 25%… <a href="#dados">ver tabela</a></figcaption> </figure>O leitor identifica a imagem e acessa os detalhes.
Exija tabela de dados ou descrição em todo gráfico publicado e inclua esse trabalho no cronograma de relatórios. Dados que só existem em imagem deixam parte da população sem acesso à informação pública.
Painel de transparência
O painel mostra os gastos em gráficos interativos.
Errado: Só visual
Situação
Gráficos sem tabela nem opção de baixar os dados.
A transparência não chega a todos.
Certo: Visual e dados
Situação
Cada gráfico tem “Ver tabela” e “Baixar os dados (CSV)”.
Qualquer pessoa consulta os valores.
Para cada gráfico ou mapa, confira se existe um alt curto e uma descrição detalhada que o leitor de tela consegue alcançar. A descrição precisa trazer os dados que levam à mesma conclusão da imagem.
Mapa de risco de enchentes
O leitor de tela chega ao mapa da cidade.
Errado: Só o nome
Leitor de tela anuncia: “Mapa de risco, imagem”
Não se sabe quais bairros estão em risco.
Certo: Nome e descrição
“Mapa de risco de enchentes, imagem”
“Bairros em risco alto: Centro, Várzea e Ilha do Leite. Ver lista completa.”
A informação essencial está em texto.
Comece a descrição pela conclusão principal e depois traga os números que a sustentam. Para comparações, use uma lista ou uma tabela.
Descrição do gráfico de matrículas
O gráfico mostra matrículas na rede municipal de 2020 a 2024.
Errado: Descrição vaga
Descrição
“Gráfico com a evolução das matrículas.”
Não diz qual foi a evolução.
Certo: Descrição útil
Descrição
“As matrículas caíram em 2021 (38 mil) e voltaram a crescer, chegando a 45 mil em 2024.”
Quem não vê o gráfico entende o que ele mostra.