Nota: está es una traducción al español autorizada por WebAIM del artículo original en inglés Creating Accessible Forms - Accessible Form Controls.
Nombre:
Aquí está el código HTML:
<label for="name">Nombre:</label> <input id="name" type="text" name="textfield" />
Observe que los valores de for y id son los mismos, por lo que la asociación de la etiqueta con el elemento del formulario es adecuada. Debido a que id debe ser único en cada página, sólo una etiqueta puede estar asociado a cada elemento de forma única. Esto significa que usted no puede tener una etiqueta para los elementos de forma múltiple. Además, los lectores de pantalla no son compatibles con varias etiquetas que están asociados a un elemento del mismo formulario.
Nota
Otra ventaja de usar las etiquetas es que el usuario puede hacer clic en la etiqueta en sí para establecer el foco en el elemento del formulario. Esto es útil para algunas personas con discapacidad motora, especialmente para la selección de casillas de verificación y botones de radio pequeños.
Pon tu dirección:
<label for="address">Pon tu dirección:</label><br /> <textarea id="address" name="addresstext"></textarea>
<fieldset> <legend>Seleccione sus ingredientes para pizzas:</legend> <input id="ham" type="checkbox" name="toppings" value="ham" /> <label for="ham">Jamón</label><br /> <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni" /> <label for="pepperoni">Pepperoni</label><br /> <input id="mushrooms" type="checkbox" name="toppings" value="mushrooms" /> <label for="mushrooms">Champiñones</label><br /> <input id="olives" type="checkbox" name="toppings" value="olives" /> <label for="olives">Olivas</label> </fieldset>
<fieldset> <legend>Elija un método de envío:</legend> <input id="overnight" type="radio" name="shipping" value="overnight" /> <label for="overnight">Durante la noche</label><br /> <input id="twoday" type="radio" name="shipping" value="twoday" /> <label for="twoday">Dos días</label><br /> <input id="ground" type="radio" name="shipping" value="ground" /> <label for="ground">Tierra</label> </fieldset>
Elige tu ciudad favorita? Amsterdam Buenos Aires Delhi Hong Kong London Los Angeles Moscow Mumbai New York Sao Paulo Tokyo
<label for="favcity">Elige tu ciudad favorita?</label> <select id="favcity" name="select"> <option value="1">Amsterdam</option> <option value="2">Buenos Aires</option> <option value="3">Delhi</option> <option value="4">Hong Kong</option> <option value="5">London</option> <option value="6">Los Angeles</option> <option value="7">Moscow</option> <option value="8">Mumbai</option> <option value="9">New York</option> <option value="10">Sao Paulo</option> <option value="11">Tokyo</option> </select>
Para mejorar la accesibilidad de esta lista aún más, podemos añadir código optgroup, al grupo de opciones. Tenga en cuenta que la directiva optgroup no es totalmente compatible con algunos agentes de usuario y lectores de pantalla. En los casos en código optgroup no sea compatible, es simplemente ignorado y no causan ningún problema de accesibilidad.
optgroup
Elige tu ciudad favorita? Delhi Hong Kong Mumbai Tokyo Amsterdam London Moscow Los Angeles New York Buenos Aires Sao Paulo
<label for="favcity2">Elige tu ciudad favorita?</label> <select id="favcity2" name="favcity2"> <optgroup label="Asia"> <option value="3">Delhi</option> <option value="4">Hong Kong</option> <option value="8">Mumbai</option> <option value="11">Tokyo</option> </optgroup> <optgroup label="Europe"> <option value="1">Amsterdam</option> <option value="5">London</option> <option value="7">Moscow</option> </optgroup> <optgroup label="North America"> <option value="6">Los Angeles</option> <option value="9">New York</option> </optgroup> <optgroup label="South America"> <option value="2">Buenos Aires</option> <option value="10">Sao Paulo</option> </optgroup> </select>
No hay que confundir la etiqueta label del atributo optgroup con la etiqueta label del elemento. Son cosas muy diferentes.
label
Múltiples menús de selección permiten al usuario elegir más de una opción de la lista.
La mayoría de los navegadores le permiten seleccionar varios elementos que no estén con el teclado con las teclas de flecha o CTRL además de las teclas de flecha para navegar y la barra espaciadora para activar / desactivar las opciones individuales. Sin embargo, en Internet Explorer, sólo se puede activar esta funcionalidad de teclado pulsando Mayús + F8 mientras que en el menú de selección múltiple. Debido a lo poco intuitivo de este acceso directo, se recomienda evitar la selecciones multiples. Por lo general, un conjunto check box puede proporcionar una funcionalidad similar, pero más accesible.
Para los botones de formulario (enviar y restablecer los elementos de entrada y los elementos de botón), no es necesaria información de accesibilidad extra. Los botones se podrá acceder siempre y cuando se utiliza un botón estándar que tiene un valor descriptivo. El valor atributo será leído por los lectores de pantalla cuando el botón sea accedido.
<input type="submit" name="submit" value="Enviar busqueda" /> <input type="reset" name="reset" value="Reiniciar" />
Porque los botones de reset se puede seleccionar accidentalmente, hay pocos casos en que se les debe proporcionar.
Si utiliza un botón de imagen (<input type="image" en lugar de un botón estándar, la entrada debe tener código alt apropiado.
alt
Here's the HTML markup:
<input type="image" name="submitbutton" alt="submit!" src="submit.gif" />
Debido a que este tipo de menús se activan cuando hay cambios del menú, estos menús pueden causar problemas de accesibilidad del teclado, ya que no pueden desplazarse por la lista sin seleccionar una de las opciones.
Algunos navegadores (como Firefox) pueden anular estos menús de salto para que no se activen, pero sólo después de que el usuario selecciona un elemento con el ratón o pulse Intro si se usa el teclado.
Go to a web site: Seleccione un sito Web WebAIM Google Yahoo Microsoft
Proporcionar un botón de envío por separado de la lista de opciones que se activa el elemento seleccionado en ese momento permitirá el acceso de teclado completo.
Siguiente
Traducción autorizada realizada por: David Mesas Teruel
