--- 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 = "Фотография Кэмпер Кота, выполняющего удар с разворота">
<br>
<Figcaption>
Мастер Кэмпер Кот демонстрирует правильный удар с разворота.
</ Figcaption>
</ Цифра>
## Instructions
Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег div который он использовал для тега figure, и тэг 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 . 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 // ваше решение должно быть здесь ```