Улучшите читаемость диаграммы
HTML5 представил элемент figure вместе со связанной figcaption. Используемые вместе эти элементы обертывают визуальное представление (например, изображение, диаграмму или схему) вместе с его заголовком. Это дает двукратное повышение доступности как с семантической группировкой связанного контента, так и с предоставлением текстовой альтернативы, которая объясняет эту figure. Для визуализации данных, таких как диаграммы, заголовок можно использовать, чтобы кратко отметить тенденции или выводы для пользователей с нарушениями зрения. Другая проблема заключается в том, как переносить табличную версию данных диаграммы за пределы экрана (с использованием CSS) для пользователей с экрана. Вот пример - обратите внимание, что figcaption идет внутри figure тегов и может быть объединен с другими элементами:
<Цифра>
<img src = "roundhouseDestruction.jpeg" alt = "Фотография Кэмпер Кота, выполняющего удар с разворота">
<br>
<Figcaption>
Мастер Кэмпер Кот демонстрирует правильный удар с разворота.
</ Figcaption>
</ Цифра>
Кэмпер Кот тяжело работает, создавая сложную гистограмму, показывающую количество времени в неделю, затраченное на обучение в хитрости, сражении и оружии. Помогите ему лучше структурировать свою страницу, изменив тег div который он использовал для тега figure, и тэг p который окружает подпись к тегу figcaption.