greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigati...

86 lines
3.2 KiB
Markdown
Raw Normal View History

docs: add Spanish docs
2018-10-08 17:34:43 +00:00
---
id: 587d7788367417b2b2512aa2
title: Make Screen Reader Navigation Easier with the nav Landmark
challengeType: 0
videoUrl: ''
feat: add Spanish and language parser
2018-10-10 20:20:40 +00:00
localeTitle: Facilita la navegación por el lector de pantalla con el navegador Landmark
docs: add Spanish docs
2018-10-08 17:34:43 +00:00
---
## Description
feat: add Spanish and language parser
2018-10-10 20:20:40 +00:00
<section id="description"> El elemento de <code>nav</code> es otro elemento de HTML5 con la función de marca incorporada para facilitar la navegación del lector de pantalla. Esta etiqueta está diseñada para envolver alrededor de los enlaces de navegación principales en su página. Si hay enlaces repetidos al sitio en la parte inferior de la página, no es necesario marcarlos también con una etiqueta de <code>nav</code> . Usar un <code>footer</code> (cubierto en el siguiente desafío) es suficiente. </section>
docs: add Spanish docs
2018-10-08 17:34:43 +00:00
## Instructions
feat: add Spanish and language parser
2018-10-10 20:20:40 +00:00
<section id="instructions"> Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un <code>div</code> . Cambie el <code>div</code> a una etiqueta de <code>nav</code> para mejorar la accesibilidad en su página. </section>
docs: add Spanish docs
2018-10-08 17:34:43 +00:00
## Tests
<section id='tests'>
```yml
tests:
- text: Su código debe tener una etiqueta de <code>nav</code> .
testString: 'assert($("nav").length == 1, "Your code should have one <code>nav</code> tag.");'
- text: Sus etiquetas de <code>nav</code> deben envolver alrededor de la <code>ul</code> y sus elementos 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: Su código no debe tener ninguna etiqueta <code>div</code> .
testString: 'assert($("div").length == 0, "Your code should not have any <code>div</code> tags.");'
- text: Asegúrese de que su elemento de <code>nav</code> tenga una etiqueta de cierre.
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.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<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>
feat: add Spanish and language parser
2018-10-10 20:20:40 +00:00
docs: add Spanish docs
2018-10-08 17:34:43 +00:00
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>