---
id: 587d778a367417b2b2512aa5
title: Mejora la accesibilidad de gráficos con el elemento figure
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJMqtE'
forumTopicId: 301015
dashedName: improve-chart-accessibility-with-the-figure-element
---
# --description--
HTML5 introdujo el elemento `figure` junto con el elemento relacionado `figcaption`. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Esto representa una mejora doble de accesibilidad, porque agrupa contenido semánticamente relacionado y además proporciona un texto alternativo que explica el contenido visual del elemento `figure`.
En visualizaciones de datos como gráficos, la leyenda o "figcaption" puede ser utilizada para resumir en formato de texto las tendencias o conclusiones, para beneficio de usuarios con discapacidades visuales. Otro de los desafíos se ocupa cómo mover fuera de la pantalla una versión en formato de tabla con los datos del gráfico (usando CSS) para ayudar a usuarios de lectores de pantalla.
Aquí hay un ejemplo: Ten en cuenta que el elemento `figcaption` va dentro de las etiquetas `figure` y se puede combinar con otros elementos:
```html
Master Camper Cat demonstrates proper form of a roundhouse kick.
```
# --instructions--
Camper Cat está trabajando para crear un gráfico de barras apiladas que muestre la cantidad de tiempo semanal a dedicar en entrenamiento en sigilo, combate y armas. Ayúdalo a estructurar mejor su página cambiando la etiqueta `div` que usó por una etiqueta `figure`, y cambiando la etiqueta `p` que rodea la leyenda por una etiqueta `figcaption`.
# --hints--
Tu código debe tener una etiqueta `figure`.
```js
assert($('figure').length == 1);
```
Tu código debe tener una etiqueta `figcaption`.
```js
assert($('figcaption').length == 1);
```
Tu código no debe tener ninguna etiqueta `div`.
```js
assert($('div').length == 0);
```
Tu código no debe tener ninguna etiqueta `p`.
```js
assert($('p').length == 0);
```
La etiqueta `figcaption` debe ser un hijo de la etiqueta `figure`.
```js
assert($('figure').children('figcaption').length == 1);
```
Tu elemento `figure` debe tener una etiqueta de cierre.
```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?
