Todos hemos tenido que lidiar con formularios en algún momento. Antes, más en papel. Hoy, cada vez son más los formularios digitales, porque sirven para la interacción del usuario con un sitio web. Ya sea para comunicarse por internet o para pedir un artículo, los encontramos en todas partes. La búsqueda en internet, por ejemplo con Google, también se ve afectada. Rellenar estos formularios es más difícil para personas con deficiencias físicas o incluso cognitivas, así como para ciegos y deficientes visuales. Para que todas las personas puedan participar en la vida pública, estos formularios deben diseñarse sin barreras. Pero: ¿cómo se crean realmente elementos de formularios accesibles?
Existen varias técnicas para ello. Sin embargo, antes de ocuparse de las técnicas, hay que conocer los elementos del formulario. Estos pueden dividirse en diferentes 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 Enviar/Cancelar
Etiquetado de campos de formulario
Para lograr la accesibilidad en los formularios, es necesario etiquetar los distintos controles. Estas etiquetas permiten a las tecnologías de asistencia reconocer las funciones de los controles y comunicárselas al usuario. Es importante que las etiquetas estén claramente vinculadas a los controles; de lo contrario, los lectores de pantalla no podrán conectarse a los elementos. Como resultado, los usuarios tienen dificultades para entender el formulario. No pueden ver qué información hay que introducir en cada campo. Como resultado, 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 colocarse en consecuencia. En los campos de entrada y las listas de selección, la etiqueta se coloca delante de los elementos de control. En cambio, en los botones de opción y las casillas de verificación, se colocan después del elemento de control. Para que las etiquetas estén vinculadas al elemento correspondiente, debe añadirse el atributo for.
El atributo aria se utiliza en HTML para los botones. Los botones pueden representar, por ejemplo, el envío o la cancelación en un formulario. Mediante 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 mediante 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 un lugar.
Se crean en HTML con el atributo input-Tag y el atributo type.
Además, se pueden añadir otros atributos, por ejemplo, definir la longitud de la línea.
Los campos multilínea se suelen utilizar para áreas de texto más grandes, como los mensajes de texto. Estos se crean con el textarea-Tag . 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 sin barreras, es necesario añadir la etiqueta-Tag . Sin embargo, no es posible establecer una conexión entre la etiqueta y los elementos si éstos no están claramente asignados. En ese caso, deben vincularse 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>
En primer lugar, se crea aquí un campo de entrada de una sola línea para el nombre de pila con el tipo "text". La leyenda "Su nombre:" se hace visible para todos mediante el elemento label. Este se coloca delante del elemento de entrada, ya que sale antes que el campo de entrada. El atributo for de la etiquetaTag y el atributo id del elemento input vinculan estas áreas. Es importante que ambos contenidos sean idénticos, 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 con Tag "textarea". La leyenda "Su mensaje:" aparece aquí a través del elemento label. También en este caso, las dos áreas con el mismo contenido de texto están conectadas entre sí mediante los atributos for e id.
Notas generales
En general, los formularios deben ser claros y sin ambigüedades. La previsibilidad también es muy útil. De este modo, los usuarios pueden ver 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 lógicamente separadas también pueden separarse visualmente. Esto facilita la orientación. Además, pueden diferenciarse entre sí por el color. 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 la operabilidad a través del 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 manejo de los formularios. Otra forma de simplificar el manejo mediante el teclado es utilizar atajos de teclado. En este caso, los elementos del formulario pueden almacenarse con atajos de teclado. Esto puede ayudar a llegar más rápidamente a ciertas áreas o a operar funciones más rápidamente. Para ello se utiliza el atributo accesskey en HTML. Este atributo se inserta en el elemento para el que se va a utilizar. Allí simplemente se asigna la tecla que luego se utiliza para el comando de teclado. Si, por ejemplo, se asigna la tecla "n" a un campo o a un botón, en Windows se puede operar con el atajo de teclado (Alt + n).
Sin embargo, hay que asegurarse de que este atajo de teclado no se esté utilizando ya para otro comando en el navegador.
Reducción al mínimo
También es aconsejable reducir todo a lo esencial para no sobrecargar innecesariamente a las personas con discapacidad. Por lo tanto, sólo deben solicitarse los datos absolutamente necesarios. Debe prescindirse de solicitar 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 cuando sean necesarios. Por ejemplo, preguntar por la edad de los hijos no tiene sentido si previamente se ha seleccionado que no hay hijos.
Ayuda y mensajes de error
Además, debe ofrecerse ayuda para la introducción de datos. Puede ser en forma de ventana de diálogo o de consejo sobre la herramienta. Con su ayuda, la entrada puede explicarse con más detalle. Otra posibilidad sería crear un enlace a una página de ayuda independiente. Esto aumentaría enormemente la tasa de éxito. Sigue habiendo errores. Es importante proporcionar mensajes de error significativos. 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 introducida no es correcta. 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 de esto sería introducir el valor 34 para un Tag de la fecha. El mensaje sería, por ejemplo: "El mes de marzo tiene 31 días. Por favor, introduzca de nuevo Tag ".
Otro tipo de error es la entrada no válida. En este caso, el desarrollador especifica valores que no son válidos. Por último, existe el tipo de error cuando no se ha realizado ninguna entrada en los campos obligatorios. Esto sucede, por ejemplo, cuando la dirección de correo electrónico es un campo obligatorio y se olvidó 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. Estos deben marcarse 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, ya debe indicarse al principio del formulario que los campos marcados con un asterisco son campos obligatorios. Otra posibilidad es mostrar estos campos obligatorios en un color o sombreado diferente. Sin embargo, estos 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 required o aria-required. Esto indica al lector de pantalla que se trata de un campo obligatorio.
Marcador de posición
Una forma de hacer que los formularios sean aún más comprensibles y 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 en el campo del formulario o se centra la atención en él, y pueden sustituirse 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 poder guardar sus entradas. Una y otra vez surgen problemas con los formularios más largos. Para evitar la pérdida de datos en este caso, se pueden guardar. Para ello, se puede implementar un botón que guarde el estado actual. Esto facilita la cumplimentación de formularios complejos. Esto también tiene la ventaja de que las entradas que faltan se pueden completar en un momento posterior. Esto se debe a que la repetición de estas entradas hace que algunos usuarios no continúen rellenando el formulario. Esto puede ser molesto tanto para el operador de un sitio web como para el usuario.
Autenticación y límite de tiempo
La autenticación aumenta la seguridad en Internet. Pero también es una de las barreras que surgen una y otra vez. Suele ocurrir en sitios web en los que es necesario iniciar sesión. Pero para que éstos sean accesibles a todos, los formularios deben diseñarse sin barreras. En muchos casos, los procedimientos de autenticación están limitados en el tiempo. La gente dispone entonces 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 limitar la entrada por un tiempo.
Los captchas plantean otro problema. Se utilizan para identificar al usuario como ser humano 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. A menudo, sin embargo, hay que pulsar sobre todas las imágenes, por ejemplo, las que muestran un coche. Sin embargo, éstas no siempre están libres de barreras. Las personas ciegas o con problemas de visión no pueden reconocer estas imágenes. Para superar esta barrera, debe ofrecerse una opción de audio.
En resumen, el diseño accesible de los campos de los formularios es un paso importante en el camino hacia un entorno digital accesible. El uso de denominaciones correctas, 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 rellenar los formularios de forma autónoma.
