--- id: 587d778a367417b2b2512aa5 title: Improve Chart Accessibility with the figure Element challengeType: 0 videoUrl: '' localeTitle: Mejora la accesibilidad de la carta con la figura Elemento. --- ## Description
HTML5 introdujo el elemento figure , junto con la figcaption relacionada. Usados ​​juntos, estos elementos envuelven una representación visual (como una imagen, diagrama o gráfico) junto con su título. Esto proporciona un aumento de accesibilidad doble al agrupar semánticamente el contenido relacionado y al proporcionar una alternativa de texto que explica la figure . Para visualizaciones de datos como cuadros, la leyenda se puede usar para observar brevemente las tendencias o conclusiones para usuarios con discapacidades visuales. Otro desafío es cómo mover una versión de tabla de los datos del gráfico fuera de la pantalla (mediante CSS) para los usuarios de lectores de pantalla. Aquí hay un ejemplo: tenga en cuenta que la figcaption va dentro de las etiquetas de la figure y se puede combinar con otros elementos:
<figura>
<img src = "roundhouseDestruction.jpeg" alt = "Foto de Camper Cat ejecutando una patada circular">
<br>
<figcaption>
Master Camper Cat demuestra la forma correcta de una patada circular.
</figcaption>
</figure>
## Instructions
Camper Cat está trabajando duro para crear un gráfico de barras apiladas que muestre la cantidad de tiempo por semana para pasar el entrenamiento en sigilo, combate y armas. Ayúdelo a estructurar mejor su página cambiando la etiqueta div que usó por una etiqueta de figure , y la etiqueta p que rodea el título a una etiqueta de figcaption .
## Tests
```yml tests: - text: Su código debe tener una etiqueta de figure . testString: 'assert($("figure").length == 1, "Your code should have one figure tag.");' - text: Su código debe tener una etiqueta de figcaption . testString: 'assert($("figcaption").length == 1, "Your code should have one figcaption tag.");' - text: Su código no debe tener ninguna etiqueta div . testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - text: Su código no debe tener ninguna etiqueta p . testString: 'assert($("p").length == 0, "Your code should not have any p tags.");' - text: La figcaption debe ser un hijo de la etiqueta de la figure . testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");' - text: Asegúrese de que el elemento de su figure tenga una etiqueta de cierre. testString: 'assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length, "Make sure your figure element has a closing tag.");' ```
## Challenge Seed
```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?

```
## Solution
```js // solution required ```