Breakdown per week of time to spend training in stealth, combat, and weapons.
figure
element, along with the related figcaption
. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure
.
For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
Here's an example - note that the figcaption
goes inside the figure
tags and can be combined with other elements:
<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
div
tag he used to a figure
tag, and the p
tag that surrounds the caption to a figcaption
tag.
figure
tag.
testString: assert($('figure').length == 1, 'Your code should have one figure
tag.');
- text: Your code should have one figcaption
tag.
testString: assert($('figcaption').length == 1, 'Your code should have one figcaption
tag.');
- text: Your code should not have any div
tags.
testString: assert($('div').length == 0, 'Your code should not have any div
tags.');
- text: Your code should not have any p
tags.
testString: assert($('p').length == 0, 'Your code should not have any p
tags.');
- text: The figcaption
should be a child of the figure
tag.
testString: assert($('figure').children('figcaption').length == 1, 'The figcaption
should be a child of the figure
tag.');
- text: Make sure your figure
element has a closing tag.
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/Breakdown per week of time to spend training in stealth, combat, and weapons.