--- id: 587d778a367417b2b2512aa5 title: Improve Chart Accessibility with the figure Element challengeType: 0 videoUrl: '' localeTitle: 使用图元素改进图表可访问性 --- ## Description
HTML5引入了figure元素以及相关的figcaption 。这些项目一起使用，包含可视化表示（如图像，图表或图表）及其标题。通过语义分组相关内容和提供解释figure的文本替代，这提供了双倍的可访问性提升。对于图表等数据可视化，可以使用标题简要说明视力障碍用户的趋势或结论。另一个挑战包括如何为屏幕阅读器用户在屏幕外（使用CSS）移动图表数据的表格版本。这是一个例子 - 请注意， figcaption位于figure标签内部，可以与其他元素组合：
<图>
<img src =“roundhouseDestruction.jpeg”alt =“露营猫执行圆屋踢的照片”>
点击
<figcaption>
Master Camper Cat展示了适当形式的圆屋踢。
</ figcaption>
</图>
## Instructions
Camper Cat正在努力创建一个堆积条形图，显示每周花在隐形，战斗和武器上的训练时间。通过将用于figure标记的div标签和包含标题的p标签更改为figcaption标记，帮助他更好地构建页面。
## Tests
```yml tests: - text: 您的代码应该有一个figure标记。 testString: 'assert($("figure").length == 1, "Your code should have one figure tag.");' - text: 您的代码应该有一个figcaption标记。 testString: 'assert($("figcaption").length == 1, "Your code should have one figcaption tag.");' - text: 您的代码不应包含任何div标记。 testString: 'assert($("div").length == 0, "Your code should not have any div tags.");' - text: 您的代码不应包含任何p标记。 testString: 'assert($("p").length == 0, "Your code should not have any p tags.");' - text: figcaption应该是figure标签的子figcaption 。 testString: 'assert($("figure").children("figcaption").length == 1, "The figcaption should be a child of the figure tag.");' - text: 确保您的figure元素有一个结束标记。 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 ```