105 lines
4.4 KiB
Markdown
105 lines
4.4 KiB
Markdown
---
|
|
id: 587d778a367417b2b2512aa5
|
|
title: Improve Chart Accessibility with the figure Element
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
|
---
|
|
|
|
## Description
|
|
<section id='description'>
|
|
HTML5 introduced the <code>figure</code> element, along with the related <code>figcaption</code>. 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 <code>figure</code>.
|
|
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 <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:
|
|
<blockquote><figure><br> <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick"><br> <br><br> <figcaption><br> Master Camper Cat demonstrates proper form of a roundhouse kick.<br> </figcaption><br></figure><br></blockquote>
|
|
</section>
|
|
|
|
## Instructions
|
|
<section id='instructions'>
|
|
Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the <code>div</code> tag he used to a <code>figure</code> tag, and the <code>p</code> tag that surrounds the caption to a <code>figcaption</code> tag.
|
|
</section>
|
|
|
|
## Tests
|
|
<section id='tests'>
|
|
|
|
```yml
|
|
tests:
|
|
- text: Your code should have one <code>figure</code> tag.
|
|
testString: assert($('figure').length == 1, 'Your code should have one <code>figure</code> tag.');
|
|
- text: Your code should have one <code>figcaption</code> tag.
|
|
testString: assert($('figcaption').length == 1, 'Your code should have one <code>figcaption</code> tag.');
|
|
- text: Your code should not have any <code>div</code> tags.
|
|
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');
|
|
- text: Your code should not have any <code>p</code> tags.
|
|
testString: assert($('p').length == 0, 'Your code should not have any <code>p</code> tags.');
|
|
- text: The <code>figcaption</code> should be a child of the <code>figure</code> tag.
|
|
testString: assert($('figure').children('figcaption').length == 1, 'The <code>figcaption</code> should be a child of the <code>figure</code> tag.');
|
|
- text: Make sure your <code>figure</code> element has a closing tag.
|
|
testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/<figure>/g).length, 'Make sure your <code>figure</code> element has a closing tag.');
|
|
|
|
```
|
|
|
|
</section>
|
|
|
|
## Challenge Seed
|
|
<section id='challengeSeed'>
|
|
|
|
<div id='html-seed'>
|
|
|
|
```html
|
|
<body>
|
|
<header>
|
|
<h1>Training</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#stealth">Stealth & Agility</a></li>
|
|
<li><a href="#combat">Combat</a></li>
|
|
<li><a href="#weapons">Weapons</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
|
|
<!-- Add your code below this line -->
|
|
<div>
|
|
<!-- Stacked bar chart will go here -->
|
|
<br>
|
|
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
|
</div>
|
|
<!-- Add your code above this line -->
|
|
|
|
</section>
|
|
<section id="stealth">
|
|
<h2>Stealth & Agility Training</h2>
|
|
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
|
<article><h3>No training is NP-complete without parkour</h3></article>
|
|
</section>
|
|
<section id="combat">
|
|
<h2>Combat Training</h2>
|
|
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
|
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
|
</section>
|
|
<section id="weapons">
|
|
<h2>Weapons Training</h2>
|
|
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
|
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
|
</section>
|
|
</main>
|
|
<footer>© 2018 Camper Cat</footer>
|
|
</body>
|
|
```
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
## Solution
|
|
<section id='solution'>
|
|
|
|
```js
|
|
// solution required
|
|
```
|
|
</section>
|