Todo el mundo ha tenido que lidiar alguna vez con formularios. Antes, sobre todo en papel. Hoy en día, cada vez son más los formularios digitales, ya que sirven para que el usuario interactúe con una página web. Ya sea para comunicarse por Internet o para realizar un pedido, se encuentran por todas partes. La búsqueda en Internet, por ejemplo con Google, también se ve afectada por ello. Rellenar estos formularios resulta complicado para las personas con limitaciones físicas o cognitivas, así como para las personas ciegas y con discapacidad visual. 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 formulario sin barreras?
Existen diversas técnicas para ello. Sin embargo, antes de abordar estas técnicas, conviene conocer los elementos de los formularios. Y es que estos se pueden clasificar en diferentes tipos. Entre otros, existen los siguientes tipos:
- campos de entrada de una sola línea
- campos de entrada de varias líneas
- Listas de selección
- Botones de opción
- Casillas de selección
- Botones para enviar/cancelar
Etiquetado de los campos de los formularios
Para garantizar la accesibilidad en los formularios, es necesario etiquetar los distintos controles. Estas etiquetas permiten que las tecnologías de asistencia reconozcan las funciones de los controles y las transmitan al usuario. Es importante que las etiquetas estén claramente vinculadas a los controles, ya que, de lo contrario, los lectores de pantalla no podrán establecer una conexión con los elementos. Esto tiene como consecuencia que los usuarios tengan dificultades para comprender el formulario. No pueden identificar qué información deben introducir en cada campo. Por ello, no pueden rellenar el formulario correctamente y suelen cometer errores. Sin embargo, no todas las descripciones se etiquetan de la misma manera. Lo 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 campos de entrada, listas de selección, botones de opción y casillas de verificación, y debe colocarse adecuadamente. En el caso de los campos de entrada y las listas de selección, la etiqueta «label» se sitúa delante de los controles. En cambio, en el caso de los botones de opción y las casillas de verificación, se coloca después del control. Para que las etiquetas puedan vincularse al elemento correspondiente, es necesario añadir además el atributo «for».
El atributo «aria» se utiliza en HTML para los botones. Los botones pueden representar, por ejemplo, las opciones «Enviar» o «Cancelar» en un formulario. Gracias a los atributos «aria», las descripciones de los elementos correspondientes solo son reconocibles para las tecnologías de asistencia. Por lo tanto, también pueden utilizarse para campos de entrada que solo deban ser visibles para el lector de pantalla. Existen muchos atributos «aria» que se utilizan para mejorar la accesibilidad en Internet. Sin embargo, estos difieren en su naturaleza y función. Para etiquetar un elemento se utiliza el denominado «aria-label». Por supuesto, también es posible utilizar la misma etiqueta para varios elementos. Esto se consigue mediante el atributo «aria-labelledby».
Campos de entrada de una línea y de varias líneas
Los campos de entrada son uno de los elementos más utilizados en los formularios. Pueden ser de una sola línea o de varias líneas. Los campos de una sola línea se utilizan para consultas breves, por ejemplo, para el nombre de una persona, una dirección de correo electrónico, una calle o una localidad.
Se crean en HTML mediante la etiqueta «input» y el atributo «type».
Además, se pueden añadir otros atributos que, por ejemplo, definan la longitud de la línea.
Los campos de varias líneas se suelen utilizar para áreas de texto más extensas, como los mensajes de texto. Estos se crean mediante la etiqueta `textarea`. En este caso, el desarrollador también puede definir el número de líneas y la longitud de cada una. Sin embargo, para que estos campos sean accesibles, es necesario añadir la etiqueta `label`. No obstante, no es posible establecer una conexión entre la etiqueta «label» y los elementos si estos no están asignados de forma unívoca. Para ello, deben vincularse entre sí mediante los atributos «for» e «id». En el siguiente ejemplo HTML se implementan etiquetas «label» 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 un campo de entrada de una sola línea para el nombre, con el tipo «text». La etiqueta «Su nombre:» se hace visible para todos mediante el elemento `label`. Este se sitúa antes del elemento `input`, ya que se muestra antes que el campo de entrada. Estos campos se vinculan entre sí mediante el atributo `for` de la etiqueta `label` y el atributo `id` del elemento `input`. Es importante que ambos contenidos sean idénticos, ya que, de lo contrario, no se podrán vincular. El atributo «name» sirve como identificador de este campo y es necesario para la transmisión de los datos a un servidor.
A continuación, se crea un campo de entrada de varias líneas mediante la etiqueta «textarea». Aquí aparece el texto «Su mensaje:» a través del elemento «label». También en este caso, ambos campos, que contienen el mismo texto, se vinculan entre sí mediante los atributos «for» e «id».
Indicaciones generales
En general, los formularios deben ser claros e inequívocos. La previsibilidad también resulta muy útil, ya que permite a los usuarios identificar rápidamente lo que se les pide. Asimismo, es muy importante que la estructura sea clara y coherente. Los elementos de contenido relacionados entre sí pueden agruparse, mientras que las unidades lógicamente separadas también pueden diferenciarse visualmente, lo que facilita la orientación. Además, pueden distinguirse entre sí mediante el uso de colores. Es importante que se respete el contraste mínimo de 4,5:1.
Facilidad de uso del teclado
Una de las características más importantes para el diseño accesible de los campos de formulario es la posibilidad de manejarlos mediante el teclado. Hay personas que, debido a su discapacidad, no pueden utilizar el ratón. Por eso es aún más importante diseñar los formularios de tal manera 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 el uso de atajos de teclado. De este modo, se pueden asignar combinaciones de teclas a los elementos del formulario. Esto puede ayudar a acceder más rápidamente a determinadas secciones o a utilizar funciones con mayor rapidez. Para ello se utiliza el atributo «accesskey» en HTML. Este atributo se inserta en el elemento al que se desea aplicar. Allí se asigna simplemente la tecla que se utilizará para el atajo de teclado. Así, si, por ejemplo, se asigna la tecla «n» a un campo o a un botón, este se podrá accionar en Windows mediante 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 del navegador.
Reducción al mínimo
Asimismo, es recomendable reducir todo a lo esencial para no suponer una carga innecesaria para las personas con discapacidad. Por lo tanto, solo deben solicitarse los datos estrictamente necesarios. Debe evitarse solicitar datos que ya se disponga. Además, la visibilidad de los campos del formulario puede adaptarse a la situación. Los campos de introducción opcionales o aquellos sujetos a condiciones no tienen por qué estar visibles. Pueden mostrarse cuando sean necesarios. Por ejemplo, no tiene sentido solicitar la edad de los hijos si previamente se ha seleccionado que no hay hijos.
Ayuda y mensajes de error
Además, debería ofrecerse una ayuda para la introducción de datos. Esto puede hacerse mediante una ventana de diálogo o una información sobre herramientas. Con su ayuda, se puede explicar con más detalle cómo introducir los datos. Otra posibilidad sería incluir un enlace a una página de ayuda específica. Esto aumentaría enormemente la tasa de éxito. Aun así, los errores ocurren. En ese caso, es importante que los mensajes de error sean claros y útiles. Por ejemplo, si al iniciar sesión se introduce una contraseña incorrecta, no debería aparecer el mensaje «El nombre de usuario o la contraseña son incorrectos». Es mejor especificar el error. Lo correcto en este caso sería: «La contraseña introducida no es correcta. Introduzca la contraseña correcta».
Hay 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 cuando, a pesar de que el formato sea válido, se ha introducido un valor incorrecto. Un ejemplo de ello sería introducir el valor 34 como día de la fecha. El mensaje sería, por ejemplo: «El mes de marzo tiene 31 días. Introduzca de nuevo el día».
Otro tipo de error son las entradas no válidas. En este caso, el desarrollador establece valores que no son válidos. Por último, existe el tipo de error que se produce cuando no se ha introducido ningún dato en los campos obligatorios. Esto ocurre, por ejemplo, cuando el campo de la dirección de correo electrónico es obligatorio y se ha olvidado introducirla. Sin embargo, esto también suele ocurrir con las condiciones generales de contratación. En muchas páginas web no se puede continuar sin aceptar esta declaración.
Campos obligatorios
Los formularios suelen contener campos obligatorios. Estos deben identificarse como tales. Un símbolo que se utiliza con frecuencia para indicar un campo obligatorio es un «*», que aparece junto al campo del formulario. Sin embargo, en este caso se debería indicar ya al principio del formulario que los campos marcados con un asterisco son obligatorios. Otra posibilidad es resaltar estos campos obligatorios con un color o un sombreado diferente. Sin embargo, esta opción no es accesible para todo el mundo. Para que los usuarios de lectores de pantalla también puedan reconocerlos, se debe utilizar además el atributo «required» o «aria-required». De este modo, se indica al lector de pantalla que se trata de un campo obligatorio.
Marca de posición
Una forma de hacer que los formularios sean aún más claros y fáciles de usar es utilizar textos de lugar en los campos del formulario. Los textos de lugar son textos temporales que se muestran dentro de un campo del 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 selecciona, y pueden sustituirse por el contenido real del campo. Los textos de ayuda se pueden insertar fácilmente en el elemento HTML de entrada de un campo de formulario utilizando el atributo «placeholder».
Guardar los datos introducidos
Todos los usuarios deberían tener la posibilidad de guardar lo que han introducido. En los formularios más largos suelen surgir problemas con frecuencia. Para evitar la pérdida de datos, estos se pueden guardar. Para ello, se puede implementar un botón que guarde el estado actual. Esto facilita la cumplimentación de formularios complejos. Además, tiene la ventaja de que los datos que falten se puedan completar más adelante. Y es que tener que volver a introducir esos datos hace que algunos usuarios dejen de rellenar el formulario. Esto puede resultar molesto tanto para el administrador de una página web como para el usuario.
Autenticación y tiempo límite
La autenticación aumenta la seguridad en Internet. Sin embargo, también es una de las barreras que surgen una y otra vez. Estas suelen aparecer en páginas web en las que es necesario iniciar sesión. Para que sean accesibles para todos, los formularios deben diseñarse sin barreras. Y es que, en muchos casos, los procedimientos de autenticación tienen un límite de tiempo. En esos casos, solo se dispone de muy poco tiempo para iniciar sesión. A menudo son solo 30 o 60 segundos. Para muchas personas con discapacidad, este tiempo no es suficiente para iniciar sesión. Por eso es importante no limitar el tiempo de introducción de datos.
Los captchas plantean otro problema. Sirven 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 también hay que hacer clic en todas las imágenes en las que, por ejemplo, se vea un coche. No obstante, estas no siempre son accesibles. Las personas ciegas o con discapacidad visual no pueden reconocer estas imágenes. Para sortear 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 etiquetas correctas, una estructura clara y bien organizada, así como el manejo mediante el teclado y los mensajes de error adecuados, aumentan la probabilidad de que las personas con discapacidad puedan rellenar los formularios de forma autónoma.
