freeCodeCamp

3.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7788367417b2b2512aa2	Make Screen Reader Navigation Easier with the nav Landmark	0		Torne a navegação do leitor de tela mais fácil com o marco de navegação

Description

O elemento nav é outro item HTML5 com o recurso de marco incorporado para facilitar a navegação do leitor de tela. Esta tag destina-se a envolver os links principais de navegação na sua página. Se houver links de sites repetidos na parte inferior da página, não será necessário marcar aqueles com uma tag de nav também. Usar um footer (coberto no próximo desafio) é suficiente.

Instructions

O Camper Cat incluiu links de navegação no topo de sua página de treinamento, mas os envolveu em uma div . Altere o div para uma tag de nav para melhorar a acessibilidade em sua página.

Tests

tests:
  - text: Seu código deve ter uma tag de <code>nav</code> .
    testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
  - text: Suas tags de <code>nav</code> devem envolver o <code>ul</code> e seus itens de lista.
    testString: 'assert($("nav").children("ul").length == 1, "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.");'
  - text: Seu código não deve ter tags <code>div</code> .
    testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
  - text: Certifique-se de que seu elemento <code>nav</code> tenha uma tag de fechamento.
    testString: 'assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/<nav>/g).length, "Make sure your <code>nav</code> element has a closing tag.");'

Challenge Seed

<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>

Solution

// solution required

3.1 KiB Raw Blame History