--- id: 587d778a367417b2b2512aa5 title: Improve Chart Accessibility with the figure Element challengeType: 0 videoUrl: '' localeTitle: Melhore a acessibilidade do gráfico com a figura Element --- ## Description
O HTML5 introduziu o elemento figure , juntamente com a figcaption relacionada. Usados ​​em conjunto, esses itens envolvem uma representação visual (como uma imagem, diagrama ou gráfico) junto com sua legenda. Isso proporciona um aumento de acessibilidade duplo por meio do conteúdo relacionado ao agrupamento semanticamente e fornece uma alternativa em texto que explica a figure . Para visualizações de dados, como gráficos, a legenda pode ser usada para observar brevemente as tendências ou conclusões para usuários com deficiências visuais. Outro desafio abrange como mover uma versão da tabela dos dados do gráfico para fora da tela (usando CSS) para usuários de leitores de tela. Aqui está um exemplo - note que o figcaption vai dentro da figure tags e pode ser combinado com outros elementos:
<figure>
<img src = "roundhouseDestruction.jpeg" alt = "Foto do Camper Cat executando um roundhouse kick">
<br>
<figcaption>
Mestre Camper Cat demonstra a forma correta de um chute circular.
</ figcaption>
</ figure>
## Instructions
Camper Cat está trabalhando duro para criar um gráfico de barras empilhadas mostrando a quantidade de tempo por semana para treinar em furtividade, combate e armas. Ajude-o a estruturar melhor sua página, alterando a tag div ele usou para uma tag figure e a tag p que circunda a legenda para uma tag figcaption .
## Tests
```yml tests: - text: Seu código deve ter uma tag de figure . testString: 'assert($("figure").length == 1, "Your code should have one figure tag.");' - text: Seu código deve ter uma tag figcaption . testString: 'assert($("figcaption").length == 1, "Your code should have one figcaption tag.");' - text: Seu código não deve ter tags div . testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - text: Seu código não deve ter tags p . testString: 'assert($("p").length == 0, "Your code should not have any p tags.");' - text: A figcaption deve ser um filho da tag de figure . testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");' - text: Certifique-se de que seu elemento figure tenha uma tag de fechamento. testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length, "Make sure your figure element has a closing tag.");' ```
## Challenge Seed
```html

Training


Breakdown per week of time to spend training in stealth, combat, and weapons.

Stealth & Agility Training

Climb foliage quickly using a minimum spanning tree approach

No training is NP-complete without parkour

Combat Training

Dispatch multiple enemies with multithreaded tactics

Goodbye world: 5 proven ways to knock out an opponent

Weapons Training

Swords: the best tool to literally divide and conquer

Breadth-first or depth-first in multi-weapon training?

```
## Solution
```js // solution required ```