Nota: está es una traducción al español autorizada por WebAIM del artículo original en inglés Creating Accessible Forms - Screen Reader Form Accessibility.
Una de las formas más comunes de la navegación a través de un formulario es utilizando la tecla Tab . Una persona llena un campo, presiona la tecla Tab , rellena el campo siguiente, y así sucesivamente, hasta que se alcanza el final del formulario. Para los usuarios visuales, esto es una cosa fácil, porque las etiquetas se colocan de tal manera que parecen estar ligados a su controles correspondientes. Para una persona ciega con un lector de pantalla, sin embargo, diseño visual no va a ser de mucha ayuda. Tiene que haber alguna manera de vincular la etiqueta con su control en el marcado. Ahora veremos un ejemplo para demostrar la posible confusión que puede ocurrir con un formulario que este poco marcado y mal organizado.
Visualmente, esta tabla tiene al menos algún sentido (aunque sea un poco confuso). En su mayor parte, a una persona
con la visión puede darse cuenta de que la etiqueta Nombre va con el
de control de debajo de él, y que la etiqueta Email va con el control
a la derecha de la misma. ¿Qué sucede cuando quitamos los colores y su formato?
Un lector de pantalla leerá la tabla de arriba en este orden:
1 |
2 |
3 |
|
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
A pesar de que un lector depantalla no va a hacer mostrar los colores, los hemos dejado a efectos de comparación. Si se compara el orden de lectura y el orden visual en la tabla anterior, se puede ver que las etiquetas y los elementos del formulario no se corresponden muy bien. La persona que utiliza el lector de pantalla es probable que se confunda, y puede rellenar el formulario incorrectamente, escribiendo la información en los lugares equivocados.
Vamos a escuchar como suena el formulario en un lector de pantalla:
Hay dos cosas que podemos hacer con la tabla anterior para solucionarlo:
Una forma de solucionar los problemas de accesibilidad de la tabla anterior podría ser reducir la tabla a dos columnas, la colocación de las etiquetas directamente a la izquierda de los elementos del formulario, a continuación, añadir los elementos HTML apropiados (ver el código HTML en la parte inferior de esta página ):
<label>Cuando un usuario de lector de pantalla navega a través de elementos de formulario en una página web, el software lector de pantalla identifica el tipo de un elemento de formulario que se encuentra seleccionado y proporcionará los medios para completar, seleccionar, deseleccionar, o enviar ese elemento de formulario. Sin embargo, cuando se navega a través del formulario, a menudo no hay indicación de qué información se relaciona con que elemento del formulario. Por ejemplo, si el usuario se desplaza a un cuadro de texto utilizando la tecla Tab, puede no haber ninguna indicación de si el cuadro de texto es donde se deberán insetar su nombre, dirección, número de teléfono, un mensaje, o cualquier otra cosa.
Esto se puede resolver mediante la asociación de las etiquetas de un formulario a elementos de la página.
La etiqueta debe casi siempre figurar al lado del elemento del formulario.
Cuando un lector de pantalla accede a un elemento del formulario que
tiene un código <label> asociado a ella,
se leerá el texto en el código <label>
e indicará el tipo de elemento de formulario que es (por ejemplo, "Nombre. Cuadro de texto" o "Edad. Casilla de verificación ").
Las etiquetas son necesarias para todos los elementos de formulario, a excepción de los botones, el
lector de pantalla lee el texto que se encuentra en el botón (por ejemplo, "Botón Enviar").
<fieldset>
Cuando haya varios elementos de formulario asociados, se pueden agrupar
por algo que se llama fieldset. Cada fieldset debe tener una leyenda.
La etiqueta legend es el texto que describe el grupo de asociados de los elementos de formulario.
En el ejemplo anterior, los fieldsets se definen para Tipo de equipo y Velocidad de internet.
El fieldset normalmente genera una frontera visual en el navegador web que rodea el contenido. En este ejemplo, se define por el borde que rodea a las tres casillas y sus etiquetas adyacentes. Las leyendas de estos conjuntos de campos son las palabras ordenador Tipo de equipo y Velocidad de internet. En este ejemplo, la etiqueta de la primera casilla en el fieldset Velocidad de internet es 28,8. La etiqueta fieldset es importante, porque sin ella, el lector de pantalla se para acceder a la casilla de verificación, se leería algo así como: "Veintiocho punto ocho. No se controla ". Si bien esto es valioso, no da ninguna descripción de los datos. ¿Es 28,8 la velocidad de Internet, edad, estatura, coeficiente intelectual, o cualquier otra cosa? Con el fieldset en su lugar, el lector pantalla leería algo como, "Velocidad de Internet: Veintiocho punto ocho. No se controla.". Los Fieldsets se debe utilizar cuando hay grupos de casillas de verificación o botones de radio. Ellos también puede ser utilizado para otros elementos de formulario que se asocian.
Incluso si el lector de pantalla no es capaz de leer la etiqueta label, fieldset,
y legend, de los elementos
que se han añadido más arriba (como es el caso con algunos de pantalla antiguos lectores),
la tabla mejorada está organizado de tal manera que es posible imaginar que etiquetas se asocian con que controles.
Vamos a escuchar lo que suena como el formulario ahora, con las mejoras que hemos hecho:
Para tener una mejor idea de lo que sucedió aqui esta el código HTML del formulario.
Observe los elementos label, id, fieldset,
y legend.
<form method="post" action="">
<table width="50%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="#CCCCCC">
<td>
<p align="right"><label for="fname">Nombre</label></p>
</td>
<td>
<input id="fname" type="text" name="text33" size="12">
</td>
</tr>
<tr>
<td>
<p align="right"><label for="lname">Apellidos</label></p>
</td>
<td>
<input id="lname" type="text" name="text34" size="12">
</td>
</tr>
<tr>
<td>
<p align="right"><label for="mi">Inicial del segundo</label></p>
</td>
<td>
<input id="mi" type="text" name="text35" size="1">
</td>
</tr>
<tr>
<td>
<p align="right"><label for="hphone">Teléfono Fijo</label></p>
</td>
<td>
<input id="hphone" type="text" name="text36" size="12">
</td>
</tr>
<tr>
<td>
<p align="right"><label for="wphone">Teléfono de trabajo</label></p>
</td>
<td>
<input id="wphone" type="text" name="text37" size="12">
</td>
</tr>
<tr bgcolor="#FFCCFF">
<td>
<p align="right"><label for="country">País</label></p>
</td>
<td>
<input id="country" type="text" name="text38" size="12">
</td>
</tr>
<tr bgcolor="#CCCCFF">
<td>
<fieldset>
<legend>Tipo de equipo</legend> <br />
<input id="mac" type="radio" name="radiobutton3" value="radiobutton">
<label for="mac">Mac </label><br />
<input id="pc" type="radio" name="radiobutton3" value="radiobutton">
<label for="pc">PC</label><br />
<input id="linux" type="radio" name="radiobutton3" value="radiobutton">
<label for="linux">Linux</label><br />
</fieldset></td>
<td>
<fieldset>
<legend>Velocidad de internet </legend> <br />
<input id="288" type="radio" name="radiobutton4" value="radiobutton">
<label for="288"> 28.8 </label><br />
<input id="56k" type="radio" name="radiobutton4" value="radiobutton">
<label for="56k">56k </label><br />
<input id="t1" type="radio" name="radiobutton4" value="radiobutton">
<label for="t1">T1</label>
</fieldset>
</td>
</tr>
</table>
</form>
Traducción autorizada realizada por: David Mesas Teruel
