3.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d7788367417b2b2512aa2	Rendere più semplice la navigazione dagli screen reader con il riferimento alla barra di navigazione	0	https://scrimba.com/c/czVwWSv	301024	make-screen-reader-navigation-easier-with-the-nav-landmark

--description--

L'elemento nav è un altro elemento HTML5 con il riferimento incorporato per facilitare la navigazione degli screen reader. Questo tag serve a contenere i principali collegamenti di navigazione nella tua pagina.

Se ci sono collegamenti al sito ripetuti in fondo alla pagina, non è necessario marcare anche quelli con un tag nav. Utilizzare un tag footer (coperto nella prossima sfida) è sufficiente.

--instructions--

Camper Cat ha incluso link di navigazione nella parte superiore della sua pagina di allenamento, ma li ha avvolti in un tag div. Cambia il tag div in un tag nav per migliorare l'accessibilità della sua pagina.

--hints--

Il tuo codice dovrebbe avere un tag nav.

assert($('nav').length == 1);

I tuoi tag nav dovrebbero avvolgere i tag ul e gli elementi della lista.

assert($('nav').children('ul').length == 1);

Il tuo codice non dovrebbe avere alcun tag div.

assert($('div').length == 0);

Il tuo elemento nav dovrebbe avere un tag di chiusura.

assert(
  code.match(/<\/nav>/g) &&
    code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
);

--seed--

--seed-contents--

<body>
  <header>
    <h1>Training with Camper Cat</h1>

    <div>
      <ul>
        <li><a href="#stealth">Stealth &amp; 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 &amp; 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>

--solutions--

<body>
  <header>
    <h1>Training with Camper Cat</h1>

    <nav>
      <ul>
        <li><a href="#stealth">Stealth &amp; 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 &amp; 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>

3.6 KiB Raw Blame History