Logotipo de la Universidad de Alicante
Logotipo del Departamento de Lenguajes y Sistemas Informáticos

Accesibilidad Web

Buscador


Búsqueda avanzada

Migas de pan

Estás en: Accesibilidad web > Ejemplos > Errores típicos > Formularios > Accesibilidad de formularios > Controles de formulario accesibles

Controles de formulario accesibles

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.

Contenido del artículo

  1. Página 1: Conceptos generales sobre la accesibilidad de formularios
  2. Página 2: Accesibilidad de formularios en lectores de pantalla
  3. Página 3: Controles de formulario accesibles
    1. Text
    2. Textareas
    3. Checkboxes
    4. Radio buttons
    5. Select menus
    6. Buttons
    7. Image buttons
    8. JavaScript menús de salto
  4. Página 4: Utilización de Dreamweaver y FrontPage para crear formularios accesibles

Text

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.

Textareas


Aquí está el código HTML:

<label for="address">Pon tu dirección:</label><br />
<textarea id="address" name="addresstext"></textarea>

Checkboxes

Seleccione sus ingredientes para pizzas:


Aquí está el código HTML:

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

Radio buttons

Elija un método de envío:

Aquí está el código HTML:

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

Select menus

Aquí está el código HTML:

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

Aquí está el código HTML:

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

Múltiples menús de selección permiten al usuario elegir más de una opción de la lista.

Nota

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.

Buttons

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.

Aquí está el código HTML:

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

Image buttons

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.

Here's the HTML markup:

<input type="image" name="submitbutton" alt="submit!" src="submit.gif" />

JavaScript menús de salto

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.

Nota

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.

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

Estándares, licencia y contacto