¿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, sobre todo en papel. Hoy en día, son cada vez más digitales, ya que facilitan la interacción del usuario con un sitio web. Ya sea para comunicarse por internet o para comprar 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 resulta más difícil para las personas con discapacidades físicas o cognitivas, así como para las personas ciegas o 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 accesibles?

Existen varias técnicas para esto. Sin embargo, antes de abordar las técnicas, es necesario conocer los elementos del formulario. Estos se pueden dividir en diferentes tipos. Entre otros, se encuentran 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 de enviar/cancelar

Etiquetado de campos de formulario

Para lograr la accesibilidad en los formularios, los distintos controles deben estar etiquetados. Estas etiquetas permiten que las tecnologías de asistencia reconozcan las funciones de los controles y las comuniquen 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 comprender el formulario. No pueden identificar qué información deben introducir en cada campo. Por consiguiente, no pueden rellenar el formulario correctamente y suelen cometer 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. 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. Para los campos de entrada y las listas de selección, la etiqueta se coloca delante de los controles. Para los botones de opción y las casillas de verificación, en cambio, se coloca después del elemento de control. Se debe añadir 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, enviar o cancelar en un formulario. Los atributos aria hacen que las descripciones de los elementos respectivos sean reconocibles solo para las tecnologías de asistencia. Por lo tanto, también se pueden usar para campos de entrada que solo deben ser visibles para el lector de pantalla. Existen muchos atributos aria que se utilizan para mejorar la accesibilidad web. Sin embargo, estos difieren en su tipo y función. El llamado aria-label se utiliza para etiquetar un elemento. Por supuesto, también es posible usar la misma etiqueta para varios elementos. Esto es posible gracias a 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 sola línea o de varias líneas. Los campos de una sola línea se utilizan para consultas breves, 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-Tag y el atributo type.

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

Los campos multilínea se suelen usar para áreas de texto extensas, como mensajes de texto. Estos se crean con la etiqueta `<textarea>`. El desarrollador puede especificar 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 crear un enlace entre la etiqueta y los elementos si no se les asigna un identificador único. En ese caso, deben vincularse mediante los atributos `<for>` e `<id>`. En el siguiente ejemplo HTML, se implementan etiquetas sencillas en este tipo de campos de entrada.

<label for=“vorname“>Su nombre de usuario: </label>

<tipo de entrada“texto“ nombre=“nombrevor“ id=“nombrevor“ />

<br />

<label for=“nachricht“>Yo soy Nachricht: </label>

<textarea name="message" id="message"> </textarea>

Aquí, primero se crea un campo de entrada de una sola línea para el nombre, de tipo "texto". La etiqueta "Tu nombre:" se muestra a todos mediante el elemento `label`. Este se coloca delante del elemento de entrada, ya que se muestra antes que el campo de entrada. El atributo `for` en la etiqueta `label` y el atributo `id` en el elemento de entrada vinculan estas áreas. Es importante que ambos contenidos sean idénticos; de lo contrario, no se podrán vincular. 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 de texto multilínea con la etiqueta "textarea". La etiqueta "Tu mensaje:" aparece aquí mediante el elemento label. Aquí también, las dos áreas con el mismo contenido de texto se vinculan mediante los atributos for e id.

Notas generales

En general, los formularios deben ser claros e inequívocos. La previsibilidad también es fundamental, ya que permite a los usuarios comprender rápidamente lo que se les pide. Una estructura clara y lógica es igualmente importante. Los elementos de contenido relacionados pueden agruparse. Las unidades lógicamente separadas también pueden distinguirse visualmente, lo que facilita la orientación. Además, pueden diferenciarse mediante colores. Es importante mantener un contraste mínimo de 4,5:1.

Funcionamiento del teclado

Una de las características más importantes para el diseño accesible de campos de formulario es la operatividad mediante teclado. Hay personas que no pueden usar el ratón debido a alguna discapacidad. Por lo tanto, es fundamental diseñar formularios de forma que también se puedan navegar mediante 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 teclado es el uso de atajos de teclado. En este caso, se pueden almacenar atajos de teclado para los elementos del formulario. Esto permite acceder a ciertas áreas o ejecutar funciones con mayor rapidez. El atributo `accesskey` de HTML se utiliza para este propósito. Este atributo se inserta en el elemento al que se le va a asignar la tecla, que luego se utiliza para el comando de teclado. Por ejemplo, si se asigna la tecla "n" a un campo o botón, se puede operar en Windows con el atajo de teclado (Alt + n).

Sin embargo, asegúrese de que este atajo de teclado no esté siendo utilizado ya para otro comando en el navegador.

Reducción al mínimo

Asimismo, es recomendable limitar la información a lo esencial para no sobrecargar innecesariamente a las personas con discapacidad. Por lo tanto, solo se deben solicitar los datos estrictamente necesarios. Se debe prescindir de la consulta de datos ya existentes. Además, la visibilidad de los campos del formulario puede adaptarse a cada situación. Los campos de entrada opcionales o los campos vinculados a condiciones no tienen por qué ser visibles. Se pueden mostrar cuando sea necesario. Por ejemplo, la consulta de la edad de los niños carece de sentido si previamente se ha indicado que no hay niños presentes.

Ayuda y mensajes de error

Además, se debe ofrecer ayuda para la introducción de datos. Esta puede ser en forma de cuadro de diálogo o información emergente. Con esta ayuda, se puede explicar la introducción de datos con mayor detalle. Otra posibilidad sería enlazar a una página de ayuda independiente. Esto aumentaría enormemente la tasa de éxito. Los errores siguen ocurriendo. Por lo tanto, es importante que los mensajes de error sean claros y comprensibles. Por ejemplo, si la contraseña se introdujo incorrectamente durante el inicio de sesión, no debería aparecer el mensaje "Nombre de usuario o contraseña incorrectos". Es mejor filtrar el error. Lo correcto sería: "La contraseña que ha introducido es incorrecta. 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 con un formato incorrecto. Por ejemplo, se introducen letras en lugar de números. También pueden producirse errores de valor. Esto ocurre cuando se introduce un valor incorrecto a pesar de que el formato sea válido. Un ejemplo sería introducir el valor 34 para la fecha. El mensaje que aparecería sería, por ejemplo: «El mes de marzo tiene 31 días. Vuelva a introducir la fecha».

Otro tipo de error es la entrada no válida. En este caso, el desarrollador especifica valores que no son válidos. Por último, está el error que se produce cuando no se introduce 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 olvida introducirla. A menudo, esto también ocurre con los términos y 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 estar marcados como tales. Un símbolo común para indicar un campo obligatorio es un asterisco (*) junto al campo. En este caso, sin embargo, conviene indicar al inicio del formulario que los campos marcados con un asterisco son obligatorios. Otra opción es mostrar estos campos obligatorios con un color o sombreado diferente. No obstante, esto no es accesible para todos. Para que los usuarios de lectores de pantalla también puedan reconocerlos, se debe utilizar el atributo `required` o `aria-required`. Esto le 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. Los marcadores de posición son textos temporales que aparecen en un campo de formulario para indicar al usuario qué tipo de información debe ingresar. Estos textos desaparecen al hacer clic o enfocar el campo, y pueden reemplazarse con el contenido real del mismo. Los marcadores de posición se pueden insertar fácilmente en el elemento de entrada HTML de un campo de formulario mediante el atributo `placeholder`.

Guardar datos de entrada

Todos los usuarios deberían tener la posibilidad de guardar sus respuestas. Los formularios largos suelen presentar problemas. Para evitar la pérdida de datos, se pueden guardar. Para ello, se puede implementar un botón que guarde el estado actual. Esto facilita el llenado de formularios complejos y, además, permite completar posteriormente las entradas faltantes. Repetir estas entradas puede provocar que algunos usuarios dejen de completar el formulario, lo cual resulta molesto tanto para el administrador 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 una de las barreras que surgen con frecuencia, sobre todo en sitios web que requieren iniciar sesión. Para que sean accesibles para todos, los formularios deben diseñarse sin barreras. Esto se debe a que, en muchos casos, los procedimientos de autenticación tienen un límite de tiempo, lo que deja a los usuarios con muy poco tiempo para iniciar sesión, a menudo tan solo 30 o 60 segundos. Para muchas personas con discapacidad, este tiempo es insuficiente. Por lo tanto, es importante no limitar el tiempo de acceso.

Los captchas plantean otro problema. Se utilizan para identificar al usuario como persona y no como ordenador. En este caso, se le pide al usuario que identifique una imagen distorsionada e introduzca el resultado en un campo de formulario. Sin embargo, a menudo es necesario hacer clic en todas las imágenes, por ejemplo, en las que muestran un coche. No obstante, estas imágenes no siempre son accesibles. Las personas ciegas o con discapacidad visual no pueden reconocerlas. Para superar esta barrera, debería ofrecerse una opción de audio.

En resumen, el diseño accesible de los campos de formulario es un paso importante hacia un entorno digital accesible. El uso de designaciones correctas, un diseño claro y estructurado, así como el manejo mediante teclado y los mensajes de error correspondientes, aumentan la probabilidad de que las personas con discapacidad también puedan completar los formularios de forma independiente.