5b760e50a3
* fix(curriculum) Improved readability and grammar * fix missing tags and grammar * fix(curriculum) changes to grammar * fix(curriculum) grammar fixes * Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix(curriculum) Grammar fix * chore: apply suggestions from code review Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
162 lines
4.9 KiB
Markdown
162 lines
4.9 KiB
Markdown
---
|
|
id: 587d778a367417b2b2512aa5
|
|
title: Improve Chart Accessibility with the figure Element
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
|
forumTopicId: 301015
|
|
dashedName: improve-chart-accessibility-with-the-figure-element
|
|
---
|
|
|
|
# --description--
|
|
|
|
HTML5 introduced the `figure` element and the related `figcaption`. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining 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:
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
# --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 `div` tag he used to a `figure` tag, and the `p` tag that surrounds the caption to a `figcaption` tag.
|
|
|
|
# --hints--
|
|
|
|
Your code should have one `figure` tag.
|
|
|
|
```js
|
|
assert($('figure').length == 1);
|
|
```
|
|
|
|
Your code should have one `figcaption` tag.
|
|
|
|
```js
|
|
assert($('figcaption').length == 1);
|
|
```
|
|
|
|
Your code should not have any `div` tags.
|
|
|
|
```js
|
|
assert($('div').length == 0);
|
|
```
|
|
|
|
Your code should not have any `p` tags.
|
|
|
|
```js
|
|
assert($('p').length == 0);
|
|
```
|
|
|
|
The `figcaption` should be a child of the `figure` tag.
|
|
|
|
```js
|
|
assert($('figure').children('figcaption').length == 1);
|
|
```
|
|
|
|
Your `figure` element should have a closing tag.
|
|
|
|
```js
|
|
assert(
|
|
code.match(/<\/figure>/g) &&
|
|
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
|
);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```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>
|
|
|
|
<!-- Only change 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>
|
|
<!-- Only change 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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```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>
|
|
<figure>
|
|
<!-- Stacked bar chart will go here -->
|
|
<br>
|
|
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
|
</figure>
|
|
</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>
|
|
```
|