---
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
```
# --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(/