Todos hemos tenido que lidiar con formularios en algún momento. Antes, más bien en papel. Hoy en día, cada vez son más los formularios digitales, ya que se utilizan para la interacción del usuario con un sitio web. Ya sea al comunicarse en línea o al pedir un artículo, se encuentran por todas partes. Las búsquedas en Internet, por ejemplo con Google, también se ven afectadas. Rellenar estos formularios es difícil para personas con deficiencias físicas o cognitivas, así como para ciegos y deficientes visuales. Para que todos puedan participar en la vida pública, estos formularios deben diseñarse de forma que sean accesibles. Pero, ¿cómo se crean realmente elementos de formulario accesibles?
Existen varias técnicas para ello. Sin embargo, antes de ponerte manos a la obra con las técnicas, debes familiarizarte con los elementos del formulario. Estos pueden clasificarse en distintos tipos. Entre otros, existen los siguientes tipos
- Campos de entrada de una sola línea
- áreas de entrada multilínea
- Listas de selección
- Botones de radio
- Casillas de verificación
- Botones para enviar/cancelar
Etiquetado de campos de formulario
Para lograr la accesibilidad en los formularios, es necesario etiquetar los distintos elementos de control. Estas etiquetas permiten a las tecnologías de asistencia reconocer las funciones de los controles y transmitirlas al usuario. Es importante que las etiquetas estén claramente vinculadas a los controles; de lo contrario, los lectores de pantalla no podrán establecer una conexión con los elementos. Como resultado, los usuarios tendrán dificultades para entender el formulario. No podrán reconocer qué información debe introducirse en cada campo. Como consecuencia, no pueden rellenar el formulario correctamente y a menudo cometen errores. Sin embargo, no todas las descripciones están etiquetadas de la misma manera. El factor decisivo es si deben ser visibles para todos o no. Por ello, en el lenguaje de programación HTML se distingue entre el elemento label y los atributos aria. El elemento label se utiliza para los campos de entrada, las listas de selección, los botones de radio y las casillas de verificación, y debe posicionarse en consecuencia. En los campos de entrada y las listas de selección, la etiqueta se coloca antes de los elementos de control. En cambio, para los botones de opción y las casillas de verificación, se coloca después del elemento de control. Debe añadirse el atributo for para que las etiquetas también puedan vincularse al elemento correspondiente.
El atributo aria se utiliza en HTML para los botones. Los botones pueden representar, por ejemplo, la función de enviar o cancelar en un formulario. Con los atributos aria, las descripciones de los elementos correspondientes sólo son reconocibles para las tecnologías de asistencia. Por tanto, también pueden utilizarse para campos de entrada que sólo deben ser visibles para el lector de pantalla. Hay muchos atributos aria que se utilizan para mejorar la accesibilidad en Internet. Sin embargo, difieren en su tipo y función. El llamado aria-label se utiliza para etiquetar un elemento. Por supuesto, también es posible utilizar la misma etiqueta para varios elementos. Esto es posible gracias a un aria-labelledby.
Campos de entrada de una o varias líneas
Los campos de entrada son uno de los elementos más utilizados en los formularios. Pueden ser de una o varias líneas. Los campos de una línea se utilizan para consultas cortas, por ejemplo, el nombre de una persona, una dirección de correo electrónico, una calle o una ciudad.
Se crean en HTML con la etiqueta input y el atributo type.
También se pueden añadir atributos adicionales, por ejemplo, para definir la longitud de la línea.
Los campos multilínea se utilizan generalmente para áreas de texto más grandes, como los mensajes de texto. Estos se crean con la etiqueta textarea. También en este caso, el programador puede especificar el número de líneas y la longitud de las mismas. Sin embargo, para que estos campos sean accesibles, debe añadirse la etiqueta label. Sin embargo, no es posible crear un vínculo entre la etiqueta y los elementos si éstos no están claramente asignados. En ese caso, deben vincularse entre sí mediante el atributo for y el atributo id. En el siguiente ejemplo HTML, se implementan etiquetas sencillas en este tipo de campos de entrada.
<label for=“vorname“>Ihr Vorname: </label>
<input type“text“ name=“vorname“ id=“vorname“ />
<br />
<label for=“nachricht“>Ihre Nachricht: </label>
<textarea name=“nachricht“ id=“nachricht“> </textarea>
Aquí se crea en primer lugar un campo de entrada de una sola línea para el nombre de pila con el tipo "text". La etiqueta "Tu nombre:" se hace visible para todos mediante el elemento label. Este se coloca antes del elemento de entrada, ya que se emite antes que el campo de entrada. Estas áreas están vinculadas entre sí mediante el atributo for de la etiqueta label y el atributo id del elemento input. Aquí es importante que ambos contenidos sean idénticos, ya que de lo contrario no podrán vincularse. El atributo name sirve como identificador para este campo y es necesario para transferir los datos a una página del servidor.
A continuación, se crea un área de entrada multilínea utilizando la etiqueta "textarea". A continuación, el elemento label muestra la leyenda "Su mensaje:". Aquí también, las dos áreas con el mismo contenido de texto están vinculadas entre sí mediante los atributos for e id.
Información general
En general, los formularios deben ser claros y sin ambigüedades. La previsibilidad también es muy útil. Esto permite a los usuarios reconocer rápidamente lo que se les pide. También es muy importante una estructura clara y sensata. Los elementos de contenido relacionados pueden agruparse. Las unidades separadas lógicamente también pueden separarse visualmente. Esto facilita la orientación. También pueden separarse entre sí por colores. Es importante mantener el contraste mínimo de 4,5:1.
Manejo del teclado
Una de las características más importantes para el diseño accesible de los campos de formulario es que puedan manejarse mediante el teclado. Hay personas que no pueden utilizar el ratón debido a su discapacidad. Por eso es tan importante diseñar los formularios de forma que también se pueda navegar por ellos con el teclado. El uso de elementos label y atributos aria facilita la comprensión y el uso de los formularios. Otra forma de simplificar el manejo mediante el teclado es utilizar atajos de teclado. Aquí se pueden asignar combinaciones de teclas a los elementos del formulario. Esto puede ayudar a llegar más rápidamente a determinadas zonas o a manejar funciones con mayor rapidez. Para ello se utiliza el atributo accesskey en HTML. Este atributo se añade al elemento para el que se va a utilizar. La tecla que se utiliza entonces para el comando de teclado simplemente se asigna allí. Por ejemplo, si se asigna la tecla "n" a un campo o botón, en Windows se puede manejar mediante el atajo de teclado (Alt + n).
Sin embargo, es importante asegurarse de que este acceso directo no se esté utilizando ya para otro comando en el navegador.
Reducción al mínimo
También es aconsejable reducir todo el proceso a lo esencial para no imponer una carga innecesaria a las personas con discapacidad. Por lo tanto, sólo deben solicitarse los datos absolutamente necesarios. No deben solicitarse datos ya existentes. Además, la visibilidad de los campos del formulario puede adaptarse a la situación. Los campos de entrada opcionales o vinculados a condiciones no tienen por qué ser visibles. Pueden mostrarse si son obligatorios. Por ejemplo, no tiene sentido pedir la edad de los hijos si previamente se ha seleccionado que no hay hijos.
Ayuda y mensajes de error
También debe proporcionarse ayuda para la introducción de datos. Puede adoptar la forma de una ventana de diálogo o de un tooltip. Puede utilizarse para explicar la entrada con más detalle. Otra opción sería crear un enlace a una página de ayuda independiente. Esto aumentaría enormemente el porcentaje de aciertos. Los errores ocurren. Los mensajes de error significativos son importantes. Por ejemplo, si al iniciar sesión se ha introducido una contraseña incorrecta, no debería aparecer el mensaje "Nombre de usuario o contraseña incorrectos". Es mejor filtrar el error. Lo correcto en este caso sería "La contraseña que ha introducido es incorrecta. Por favor, introduzca la contraseña correcta".
Existen diferentes tipos de errores. En primer lugar, el error de formato. En este caso, la contraseña se introduce en un formato incorrecto. Por ejemplo, se introducen letras en lugar de números. También pueden producirse errores de valor. Esto puede ocurrir si se introduce un valor incorrecto a pesar de tener un formato válido. Un ejemplo sería introducir el valor 34 para un día de la fecha. El mensaje sería el siguiente: "El mes de marzo tiene 31 días. Vuelva a introducir el día".
Otro tipo de error son las entradas no válidas. En este caso, el desarrollador especifica valores que no son válidos. Por último, existe el tipo de error si no se ha realizado ninguna entrada para los campos obligatorios. Esto ocurre, por ejemplo, si la consulta de la dirección de correo electrónico es un campo obligatorio y se ha olvidado la entrada. Sin embargo, esto también ocurre a menudo con las condiciones generales. En muchos sitios web, no se puede continuar sin aceptar esta declaración.
Campos obligatorios
Los formularios suelen contener campos obligatorios. Éstos deben señalarse como tales. Un símbolo frecuentemente utilizado para indicar un campo obligatorio es un "*", que aparece junto al campo del formulario. En este caso, sin embargo, debe indicarse al principio del formulario que los campos marcados con un asterisco son obligatorios. Otra opción es mostrar estos campos obligatorios en un color o tono diferente. Sin embargo, éstos no son accesibles para todo el mundo. Para que los usuarios de lectores de pantalla también puedan reconocerlos, también debe utilizarse el atributo requerido o aria-requerido. Esto informa al lector de pantalla de que se trata de un campo obligatorio.
Marcador de posición
Una forma de hacer que los formularios sean aún más fáciles de entender y más fáciles de usar es utilizar marcadores de posición en los campos de formulario. Los marcadores de posición son textos temporales que se muestran dentro de un campo de formulario para indicar al usuario qué tipo de información debe introducir. Estos textos desaparecen en cuanto se hace clic o se centra la atención en el campo del formulario y pueden ser sustituidos por el contenido real del campo del formulario. Los marcadores de posición pueden insertarse fácilmente en el elemento de entrada HTML de un campo de formulario utilizando el atributo placeholder.
Guardar entradas
Todos los usuarios deberían tener la opción de guardar sus entradas. Siempre hay problemas con los formularios más largos. Para evitar la pérdida de datos, éstos pueden guardarse. Para ello, se puede implementar un botón que guarde el estado actual. Esto facilita la cumplimentación de formularios complejos. También tiene la ventaja de que las entradas que faltan pueden añadirse posteriormente. La repetición de estas entradas hace que algunos usuarios no completen el formulario. Esto puede ser molesto tanto para el operador del sitio web como para el usuario.
Autenticación y límite de tiempo
La autenticación aumenta la seguridad en Internet. Sin embargo, también es uno de los obstáculos que surgen una y otra vez. Suele ocurrir en sitios web en los que se requiere un inicio de sesión. Sin embargo, para que sean accesibles a todo el mundo, los formularios deben diseñarse sin barreras. En muchos casos, los procedimientos de autenticación están limitados en el tiempo. Así, el usuario dispone de muy poco tiempo para iniciar sesión. A menudo son sólo 30 o 60 segundos. Para muchas personas con discapacidad, este tiempo no es suficiente. Por eso es importante no establecer un límite de tiempo para iniciar sesión.
Los captchas plantean otro problema. Se utilizan para identificar al usuario como persona y no como ordenador. En este caso, se pide al usuario que identifique una imagen distorsionada e introduzca el resultado en un campo del formulario. Sin embargo, a menudo es necesario hacer clic en todas las imágenes que muestran un coche, por ejemplo. Sin embargo, éstas no siempre son accesibles. Las personas ciegas o con problemas de visión no pueden reconocer estas imágenes. Para superar esta barrera, debería ofrecerse una opción de audio.
En resumen, puede decirse que el diseño accesible de los campos de los formularios es un paso importante hacia un entorno digital accesible. El uso de un etiquetado correcto, un diseño claro y estructurado, así como el manejo a través del teclado y los correspondientes mensajes de error, aumentan la probabilidad de que las personas con discapacidad también puedan cumplimentar los formularios de forma autónoma.
