HTML5 introdujo el elemento `figure` y el `figcaption` relacionado. Cuando se usan juntos, estos elementos envuelven una representación visual (como puede ser una imagen, diagrama o gráfico) junto con su leyenda. Envolviendo estos elementos da un impulso de accesibilidad doble al agrupar semánticamente el contenido relacionado y proporciona una alternativa de texto explicando la figura `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
<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--
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`.