da38c969b2
* Fix(curriculum): Added Spanish translations and corrected grammar issues * Fixed typos and added Spanish translations Co-authored-by: sebastiansaenz <52339334+sebastiansaenz@users.noreply.github.com> Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
4.2 KiB
4.2 KiB
id, title, challengeType, videoUrl, localeTitle
| id | title | challengeType | videoUrl | localeTitle |
|---|---|---|---|---|
| 587d7790367417b2b2512ab1 | Use tabindex to Specify the Order of Keyboard Focus for Several Elements | 0 | Use tabindex para especificar el orden de enfoque del teclado para varios elementos |
Description
tabindex también especifica el orden de tabulación exacto de los elementos. Esto se logra cuando el valor del atributo se establece en un número positivo de 1 o superior. Establecer un tabindex = "1" traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de tabindex especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y tabindex="0" . Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que utiliza la fuente HTML). Esto puede confundir a los usuarios que esperan comenzar la navegación desde la parte superior de la página. Esta técnica puede ser necesaria en algunas circunstancias, pero en términos de accesibilidad, tenga cuidado antes de aplicarla. Aquí hay un ejemplo: <div tabindex="1">¡Tengo enfoque de teclado, y lo tengo primero!</div> <div tabindex="2">¡Tengo enfoque de teclado, y lo tengo segundo!</div> Instructions
input de búsqueda y los campos input de controles de formulario sean los dos primeros elementos en el orden de tabulación. Agregue el atributo tabindex establecido a "1" al campo input de búsqueda, y un atributo de tabindex establecido a "2" al campo input de formulario.Tests
tests:
- text: Su código debe agregar un atributo <code>tabindex</code> a la etiqueta de <code>input</code> búsqueda.
testString: 'assert($("#search").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.");'
- text: Su código debe agregar un atributo <code>tabindex</code> a la etiqueta de <code>input</code> envío.
testString: 'assert($("#submit").attr("tabindex"), "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.");'
- text: Su código debe establecer el atributo <code>tabindex</code> en la etiqueta de <code>input</code> búsqueda a un valor de 1.
testString: 'assert($("#search").attr("tabindex") == "1", "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.");'
- text: Su código debe establecer el atributo <code>tabindex</code> en la etiqueta de <code>input</code> envío a un valor de 2.
testString: 'assert($("#submit").attr("tabindex") == "2", "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.");'
Challenge Seed
<body>
<header>
<h1>Pensamientos aun más profundos con el Maestro Camper Cat</h1>
<nav>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Entrenamiento</a></li>
</ul>
</nav>
</header>
<form>
<label for="search">Búsqueda:</label>
<input type="search" name="search" id="search">
<input type="submit" name="submit" value="Submit" id="submit">
</form>
<h2>Frases Inspiracionales</h2>
<blockquote>
<p>“No hay Teoría de la Evolución, sólo una lista de criaturas a las que he dejado vivir.”<br>
- Chuck Norris</p>
</blockquote>
<blockquote>
<p>“Los hombres sabios dicen que el perdón es divino, pero nunca pagan el precio completo de una pizza que llega tarde.”<br>
- TMNT</p>
</blockquote>
<footer>© 2018 Camper Cat</footer>
</body>
Solution
// solución requerida