O HTML5 introduziu o elemento `figure`, juntamente com o `figcaption`. Usados juntos, esses elementos envolvem uma representação visual (como uma imagem, diagrama ou gráfico) junto de sua legenda. Isso aumenta a acessibilidade em duas partes, agrupando semanticamente o conteúdo relacionado e fornecendo uma alternativa textual que explica a imagem contida em `figure`.
Para a visualização de dados na forma de gráficos, a legenda pode ser usada para registrar de modo sucinto as tendências ou conclusões para usuários com deficiência visual. Outro desafio abrange como mover uma versão dos dados contidos em uma tabela de um gráfico para fora da tela (usando CSS) para usuários de leitores de tela.
Um exemplo: observe que o elemento `figcaption` vai dentro da tag `figure` e pode ser combinada com outros elementos:
```html
<figure>
<imgsrc="roundhouseDestruction.jpeg"alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
```
# --instructions--
O Camper Cat está trabalhando a sério na criação de um gráfico de barras empilhadas que mostra o tempo por semana que ele deve passar nos treinamentos de furtividade, combate e armas. Ajude-o a estruturar melhor sua página alterando a tag `div` para a tag `figure`. Altere também a tag `p`, que envolve a legenda, para uma tag `figcaption`.
# --hints--
O código deve ter uma tag `figure`.
```js
assert($('figure').length == 1);
```
O código deve ter uma tag `figcaption`.
```js
assert($('figcaption').length == 1);
```
O código não deve ter nenhuma tag `div`.
```js
assert($('div').length == 0);
```
O código não deve ter nenhuma tag `p`.
```js
assert($('p').length == 0);
```
A tag `figcaption` deve ser filha da tag `figure`.
