Fix typos, consistent styling w/ English version (#31238)
Also made the whole text have the same level of formality and corrected Google translations.pull/35182/head^2
Víctor Lasa
Randell Dawson
parent
6481ddd435
commit
914e7a4fe4
|
|
@ -3,16 +3,21 @@ id: 587d778b367417b2b2512aa7
|
|||
title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Agrupe los botones de radio en un elemento fieldset para una mejor accesibilidad
|
||||
localeTitle: Envolver los botones de radio en un elemento fieldset para mejorar la accesibilidad
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> El siguiente tema de formulario cubre la accesibilidad de los botones de radio. A cada opción se le asigna un <code>label</code> con un atributo <code>for</code> vinculado con el <code>id</code> del elemento correspondiente, tal como se describe en el último desafío. Dado que los botones de radio a menudo vienen en un grupo del cuál el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto. La etiqueta <code>fieldset</code> rodea todo el grupo de botones de radio para lograrlo. A menudo utiliza una etiqueta de <code>legend</code> para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento <code>fieldset</code> . El <code>fieldset</code> y la etiqueta de <code>legend</code> no son necesarios cuando las opciones se explican por sí mismas, como una selección de género. Usando un <code>label</code> con el atributo <code>for</code> para cada botón de radio es suficiente.
|
||||
|
||||
<br>Aquí hay un ejemplo: <blockquote> <form> <br> <fieldset> <br> <legend> Elija uno de estos tres elementos: </legend> <br> <input id = "one" type = "radio" name = "items" value = "one"> <br> <label for = "one"> Choice One </label> <br> <br> <input id = "two" type = "radio" name = "items" value = "two"> <br> <label for = "two"> Choice Two </label> <br> <br> <input id = "three" type = "radio" name = "items" value = "three"> <br> <label for = "three"> Choice Three </label> <br> </fieldset> <br> </form> <br></blockquote></section>
|
||||
<section id="description">
|
||||
El siguiente tema sobre formularios trata la accesibilidad de los botones de radio. A cada opción se le asigna un <code>label</code> con un atributo <code>for</code> vinculado con el <code>id</code> del elemento correspondiente, tal como se describe en el último desafío. Dado que los botones de radio a menudo vienen en un grupo en que el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto.
|
||||
La etiqueta <code>fieldset</code> rodea todo el grupo de botones de radio para lograrlo. A menudo utiliza una etiqueta de <code>legend</code> para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento <code>fieldset</code>. El <code>fieldset</code> y la etiqueta de <code>legend</code> no son necesarios cuando las opciones se explican por sí mismas, como una selección de género. Usando un <code>label</code> con el atributo <code>for</code> para cada botón de radio es suficiente.
|
||||
Aquí hay un ejemplo:
|
||||
<blockquote> <form> <br> <fieldset> <br> <legend> Elija uno de estos tres elementos: </legend> <br> <input id = "one" type = "radio" name = "items" value = "one"> <br> <label for = "one"> Opción Uno </label> <br> <br> <input id = "two" type = "radio" name = "items" value = "two"> <br> <label for = "two"> Opción Dos </label> <br> <br> <input id = "three" type = "radio" name = "items" value = "three"> <br> <label for = "three"> Opción Tres </label> <br> </fieldset> <br> </form> <br></blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Camper Cat desea información sobre el nivel de ninja de sus usuarios cuando se registran en su lista de correo electrónico. Él ha añadido un conjunto de botones de radio y aprendió de nuestra lección anterior a utilizar etiquetas con el atributo <code>for</code> para cada elección. ¡Vamos gato campista! Sin embargo, su código todavía necesita ayuda. Cambie la etiqueta <code>div</code> que rodea a los botones de radio por una etiqueta <code>fieldset</code> y cambie la etiqueta <code>p</code> dentro de una <code>legend</code> . </section>
|
||||
<section id="instructions">
|
||||
Camper Cat quiere información sobre el nivel ninja de sus usuarios cuando se registran en su lista de correo electrónico. Él ha añadido un conjunto de botones de radio y aprendió a utilizar etiquetas con el atributo <code>for</code> de nuestra lección anterior para cada opción. ¡Sigue así, Camper Cat! Sin embargo, su código todavía necesita algo de ayuda. Cambia la etiqueta <code>div</code> que rodea a los botones de radio por una etiqueta <code>fieldset</code> y cambia la etiqueta <code>p</code> que está dentro a <code>legend</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
|
@ -21,9 +26,9 @@ localeTitle: Agrupe los botones de radio en un elemento fieldset para una mejor
|
|||
tests:
|
||||
- text: Tu código debe tener una etiqueta <code>fieldset</code> en todo el grupo de botones de radio.
|
||||
testString: 'assert($("fieldset").length == 1, "Your code should have a <code>fieldset</code> tag around the radio button set.");'
|
||||
- text: Asegúrese de que su elemento <code>fieldset</code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrate de que tu elemento <code>fieldset</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length, "Make sure your <code>fieldset</code> element has a closing tag.");'
|
||||
- text: Tu código debe tener una etiqueta de <code>legend</code> alrededor del texto que pregunta qué nivel de ninja es un usuario.
|
||||
- text: Tu código debe tener una etiqueta de <code>legend</code> alrededor del texto que pregunta qué nivel ninja es un usuario.
|
||||
testString: 'assert($("legend").length == 1, "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.");'
|
||||
- text: Tu 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.");'
|
||||
|
|
|
|||
Loading…
Reference in New Issue