0Pricing
Web Accessibility Academy · Aula

Imagens complexas: gráficos, mapas e descrições longas

Aprenda a lidar com imagens que exigem mais do que uma frase curta.

Imagens complexas: gráficos, mapas e descrições longas é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

When Alt Is Not Enough

Some images carry too much information for a short phrase. Charts, maps, and diagrams need a longer description plan.

Start With a Short Alt

Even a complex image still gets a brief alt that names it, like a bar chart of monthly sales for 2024.

<img src="chart.png" alt="Bar chart of monthly sales for 2024">

Then Add the Detail

The short alt names the image; a nearby long description then conveys the actual data or relationships it shows.

Describe the Insight

A great long description gives the takeaway, like sales peaked in December, not a dry list of every single value.

The Data Table Fallback

For charts, the strongest alternative is often a real HTML table with the same numbers right below the graphic.

Linking to a Description

You can place a long description on the page and connect it with aria-describedby pointing to its element id.

<img src="map.png" alt="Store map" aria-describedby="mapdesc">

Figure and Figcaption

Wrap an image and its visible explanation in figure and figcaption so the pairing is clear to everyone.

<figure><img src="flow.png" alt="Checkout flow"><figcaption>Three-step checkout</figcaption></figure>

Maps Need Their Data

A map image is useless without the underlying facts, so provide an address, directions, or list as the text equivalent.

Diagrams and Flows

For a flowchart, describe the steps and their order in prose, so the logic survives without the visual layout.

Keep It Discoverable

Make sure the long description is easy to find. A hidden text equivalent users cannot reach is no help at all.

Match Effort to Complexity

The richer the image, the more your text equivalent must do. Let the image's complexity set how much you write.

Quick Check

Choose the best plan for a complex chart.

Recap

You did it! Complex images get a short alt plus a real text equivalent, a data table, figcaption, or aria-describedby that conveys the insight.

Perguntas Frequentes

A aula “Imagens complexas: gráficos, mapas e descrições longas” é grátis?

Sim — o texto completo de “Imagens complexas: gráficos, mapas e descrições longas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.

O que vou aprender em “Imagens complexas: gráficos, mapas e descrições longas”?

Aprenda a lidar com imagens que exigem mais do que uma frase curta. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Web Accessibility Academy?

Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Imagens complexas: gráficos, mapas e descrições longas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Web Accessibility Academy?

Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Informativa versus decorativa: a primeira decisão
  2. Escrevendo alt que transmite finalidade, não pixels
  3. alt vazio e a imagem decorativa oculta
  4. Imagens complexas: gráficos, mapas e descrições longas
← Voltar para Web Accessibility Academy