---
id: 587d778a367417b2b2512aa5
title: Melhorar a acessibilidade de gráficos com o elemento figure
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJMqtE'
forumTopicId: 301015
dashedName: improve-chart-accessibility-with-the-figure-element
---
# --description--
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
Master Camper Cat demonstrates proper form of a roundhouse kick.
```
# --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`.
```js
assert($('figure').children('figcaption').length == 1);
```
O elemento `figure` deve ter uma tag de fechamento.
```js
assert(
code.match(/<\/figure>/g) &&
code.match(/<\/figure>/g).length === code.match(//g).length
);
```
# --seed--
## --seed-contents--
```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?
```
# --solutions--
```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?
