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 > Accesibilidad de formularios en lectores de pantalla

Accesibilidad de formularios en lectores de pantalla

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.

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
    1. Proporcionar un diseño de forma lógica
    2. Uso de etiquetas de formularios adecuadamente
      1. Crear etiquetas para los elementos de formulario utilizando el elemnto <label>
      2. Agrupar elementos de formulario mediante el uso del elemnto <fieldset>
    3. Ejemplo de código
  3. Página 3: Controles de formulario accesibles
  4. Página 4: Utilización de Dreamweaver y FrontPage para crear formularios accesibles

Proporcionar un diseño de forma lógica

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.

[Saltar la tabla confusa]

Nombre
Email
Teléfono Fijo
Inicial del segundo
Tipo de equipo
Teléfono de trabajo
Apellidos
MacPC
Country
Velocidad de internet28.856kT1

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: La naturaleza visual de la siguiente tabla se limitan su utilidad a los usuarios de lectores de pantalla. El punto que se ilustra es que los lectores de pantalla comienza con la fila superior, la lectura de todo el contenido de cada celda de izquierda a derecha en cada columna de la fila, hasta que el extremo de la tabla se alcanza. Seleccione este enlace para saltar sobre la tabla.

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:

Uso de etiquetas de formularios adecuadamente

Hay dos cosas que podemos hacer con la tabla anterior para solucionarlo:

  1. Poner las etiquetas junto a sus controles
  2. Usar marcadores HTML para asociar los controles del formulario con sus etiquetas

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

Tipo de equipo


Velocidad de internet


Crear etiquetas para los elementos de formulario utilizando el elemnto <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").

Agrupar elementos de formulario mediante el uso del elemnto <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:

Ejemplo de código

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.

[Saltar el código]

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

Siguiente

Traducción autorizada realizada por: David Mesas Teruel

Estándares, licencia y contacto