9bf3fdbf38
* fix: changed challenge test text to use should * fix: changed have to be used in Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: reworded test verbiage Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: improved test verbiage Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: improved test verbiage Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected typo Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: changed have the to be used in Co-Authored-By: Tom <20648924+moT01@users.noreply.github.com> * fix: corrected verbiage Co-Authored-By: Parth Parth <34807532+thecodingaviator@users.noreply.github.com>
3.7 KiB
3.7 KiB
id, title, challengeType, videoUrl, forumTopicId
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| 587d7788367417b2b2512aa2 | Make Screen Reader Navigation Easier with the nav Landmark | 0 | https://scrimba.com/c/czVwWSv | 301024 |
Description
nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.
If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient.
Instructions
div. Change the div to a nav tag to improve the accessibility on his page.
Tests
tests:
- text: Your code should have one <code>nav</code> tag.
testString: assert($('nav').length == 1);
- text: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.
testString: assert($('nav').children('ul').length == 1);
- text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0);
- text: Your <code>nav</code> element should have a closing tag.
testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length);
Challenge Seed
<body>
<header>
<h1>Training with Camper Cat</h1>
<div>
<ul>
<li><a href="#stealth">Stealth & Agility</a></li>
<li><a href="#combat">Combat</a></li>
<li><a href="#weapons">Weapons</a></li>
</ul>
</div>
</header>
<main>
<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>
</body>
Solution
<body>
<header>
<h1>Training with Camper Cat</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 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>
</body>