¿Cómo se diseñan los elementos de los formularios para que sean accesibles?

Todos hemos tenido que lidiar con formularios en algún momento. Antes, más en papel. Hoy, cada vez más formularios digitales, porque sirven para la interacción del usuario con un sitio web. Tanto si se trata de comunicarse por Internet como de pedir un artículo, se pueden encontrar por 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. 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, los distintos controles deben estar etiquetados. 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 asociadas 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 identificar qué información hay que introducir en cada campo. Como consecuencia, no pueden rellenar el formulario correctamente y a menudo cometen errores. Sin embargo, no todas las descripciones tienen la misma etiqueta. 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 campos de entrada, listas de selección, botones de radio y 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 controles. 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, el envío o la cancelación en un formulario. Los atributos aria hacen que las descripciones de los elementos respectivos sólo sean reconocibles para las tecnologías de asistencia. Por lo 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 web. 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, como el nombre de una persona, una dirección de correo electrónico, una dirección postal o una ciudad.

Se crean en HTML con la etiqueta input y el atributo type.

Además, pueden añadirse otros atributos que definan, por ejemplo, la longitud de la línea.

Los campos multilínea se utilizan normalmente para áreas de texto más grandes, como los mensajes de texto. Estos se crean con la etiqueta textarea. De nuevo, 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 no están asignados de forma única. 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>

Aquí se crea primero 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 delante del elemento de entrada, ya que se emite antes que el campo de entrada. El atributo for de la etiqueta label 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 la etiqueta "textarea". La etiqueta "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 vinculadas 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. Esto permite a los usuarios 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 el uso de atajos de teclado. Aquí, 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. Por ejemplo, si 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, asegúrese de que este atajo de teclado no se utiliza ya para otro comando en el navegador.

Reducción al mínimo

Asimismo, es aconsejable reducir todo 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. Debe prescindirse de la consulta de 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, la consulta de 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 una ayuda para la introducción de datos. Puede ser en forma de cuadro de diálogo o de tooltip. Con su ayuda, la entrada puede explicarse con más detalle. Otra posibilidad sería enlazar con una página de ayuda independiente. Esto aumentaría enormemente el porcentaje de aciertos. Sigue habiendo errores. Lo importante entonces son los mensajes de error significativos. Por ejemplo, si la contraseña se ha introducido incorrectamente durante el inicio de sesión, no debería aparecer el mensaje "El nombre de usuario o la contraseña son 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 varios 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 se introduce un valor incorrecto a pesar de tener un formato válido. Un ejemplo sería introducir el valor 34 para una etiqueta de fecha. El mensaje sería, por ejemplo "El mes de marzo tiene 31 días. Vuelva a introducir la etiqueta".

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 introducido ningún dato en los campos obligatorios. Esto sucede, por ejemplo, si la dirección de correo electrónico es un campo obligatorio y se olvidó la entrada. A menudo esto ocurre también con las condiciones generales. En muchos sitios web, no podrá 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, debe señalarse justo al principio del formulario que los campos marcados con un asterisco son campos obligatorios. Otra opción 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 aparecen dentro de un campo de formulario para indicar al usuario qué tipo de información debe introducir. Estos textos desaparecen una vez que 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 tener la posibilidad de 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 dejen de rellenar 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. Sin embargo, también es una de las barreras que siguen apareciendo. Suelen aparecer 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. Esto se debe a que, 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 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.