Un formulario es un elemento que permite que un usuario proporcione datos en un campo o un grupo de campos. Los formularios pueden ser tan simples como un solo campo o tan complicados como un elemento de formulario de varios pasos con varios campos por página, validación de entradas y, a veces, un CAPTCHA.
Los formularios se consideran uno de los elementos más difíciles de hacer bien desde una perspectiva de accesibilidad, ya que requieren el conocimiento de todos los elementos que ya abordamos, así como reglas adicionales específicas solo para los formularios. Con un poco de conocimiento y tiempo, puedes crear un formulario accesible que se adapte a ti y a tus usuarios.
Formularios es el último módulo específico de componentes de este curso. En este módulo, se enfocará en los lineamientos específicos de los formularios, pero todos los demás lineamientos que aprendiste en los módulos anteriores, como la estructura del contenido, el enfoque del teclado y el contraste de colores, también se aplican a los elementos de los formularios.
Campos
La columna vertebral de los formularios son los campos. Los campos son pequeños patrones interactivos, como un elemento de entrada o un botón de selección, que permiten a los usuarios ingresar contenido o tomar una decisión. Hay una gran variedad de campos de formulario para elegir.
La recomendación predeterminada es usar patrones HTML establecidos en lugar de compilar algo personalizado con ARIA, ya que ciertas funciones y atributos, como los estados, las propiedades y los valores de los campos, están integrados de forma inherente en los elementos HTML. Los campos personalizados requieren que agregues manualmente la ARIA.
No se recomienda: HTML personalizado con ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Recomendado: HTML estándar
<form id="sundae-order-form">
<!-- form content -->
</form>
Además de elegir los patrones de campos de formulario más accesibles, cuando corresponda, también debes agregar atributos de autocompletado de HTML a tus campos. Agregar atributos de autocompletado permite una definición o identificación del propósito más detallada para los agentes de usuario y las tecnologías de accesibilidad (AT).
Los atributos de autocompletado permiten a los usuarios personalizar presentaciones visuales, como mostrar un ícono de pastel de cumpleaños en un campo con el atributo de autocompletado de cumpleaños (bday) asignado. En términos más generales, los atributos de autocompletar hacen que completar formularios sea más fácil y rápido. Esto es especialmente útil para las personas con trastornos cognitivos y de lectura, y para quienes usan AT, como lectores de pantalla.
<form id="sundae-order-form">
<p>Name: <input type="name" autocomplete="name"></p>
<p>Telephone: <input type="tel" autocomplete="tel"></p>
<p>Email address: <input type="email" autocomplete="email"></p>
</form>
Por último, los campos de formulario no deben producir cambios contextuales cuando reciben enfoque o entradas del usuario, a menos que se le haya advertido al usuario sobre el comportamiento antes de usar el componente. Por ejemplo, un formulario no debe enviarse automáticamente cuando un campo recibe el enfoque o una vez que un usuario agrega contenido al campo.
Etiquetas
Las etiquetas informan al usuario sobre el propósito de un campo, si es obligatorio, y también pueden proporcionar información sobre los requisitos del campo, como el formato de entrada. Las etiquetas deben estar visibles en todo momento y describir con precisión el campo del formulario a los usuarios.
Uno de los principios fundamentales de los formularios accesibles es establecer una conexión clara y precisa entre un campo y su etiqueta. Esto es así tanto de forma visual como programática. Sin este contexto, es posible que un usuario no comprenda cómo completar los campos del formulario.
<form id="sundae-order-form">
<p><label>Name (required): <input type="name" autocomplete="name" required></label></p>
<p><label>Telephone (required): <input type="tel" autocomplete="tel" required></label></p>
<p><label>Email address: <input type="email" autocomplete="email"></label></p>
</form>
Además, los campos de formulario relacionados, como una dirección de correo postal, deben agruparse de forma visual y programática. Un método es usar el fieldset y el patrón de leyenda para agrupar elementos similares.
Descripciones
Las descripciones de los campos son similares a las etiquetas en cuanto a su propósito, ya que se usan para proporcionar más contexto al campo y a los requisitos. Las descripciones de los campos no son obligatorias para la accesibilidad si las etiquetas o las instrucciones del formulario son lo suficientemente descriptivas.
Sin embargo, hay situaciones en las que es útil agregar información adicional para evitar errores en los formularios, como transmitir información sobre la longitud mínima de la entrada para un campo de contraseña o indicarle a un usuario qué formato de calendario usar (como DD/MM/YYYY).
Existen muchos métodos diferentes que puedes usar para agregar descripciones de campos a tus formularios. Uno de los mejores métodos es agregar un atributo aria-describedby al elemento del formulario, además de un elemento <label>. El lector de pantalla leerá la descripción y la etiqueta.
Si agregas el atributo aria-labelledby a tu elemento, el valor del atributo anula el texto dentro de tu <label>. Como siempre, asegúrate de probar el código final con todos los AT que planeas admitir.
Errores
Cuando creas formularios accesibles, puedes hacer mucho para evitar que los usuarios cometan errores. Anteriormente en este módulo, hablamos sobre cómo marcar campos de forma clara, crear etiquetas de identificación y agregar descripciones detalladas siempre que sea posible. Pero no importa lo claro que creas que es tu formulario, con el tiempo, un usuario cometerá un error.
Cuando un usuario encuentra un error de formulario, el primer paso es informarlo. Se debe identificar claramente el campo en el que se produjo el error y se debe describir el error en texto al usuario.
Existen diferentes métodos para mostrar mensajes de error, como los siguientes:
- Un mensaje modal intercalado cerca de donde se produjo el error
- Un conjunto de errores agrupados en un mensaje más grande en la parte superior de la página
Asegúrate de prestar atención al enfoque del teclado y a las opciones de región en vivo de ARIA cuando anuncies errores.
Siempre que sea posible, ofrécele al usuario una sugerencia detallada para corregir el error. Hay dos atributos disponibles para notificarles a los usuarios los errores.
- Puedes usar el atributo HTML required. El navegador proporcionará un mensaje de error genérico según los parámetros de validación enviados.
- También puedes usar el atributo aria-required para compartir un mensaje de error personalizado con los AT. Solo los AT recibirán el mensaje, a menos que agregues código adicional para que todos los usuarios puedan verlo.
Una vez que un usuario crea que se resolvieron todos los errores, permítele volver a enviar el formulario y enviar comentarios sobre los resultados de su envío. Un mensaje de error le indica al usuario que tiene más actualizaciones que realizar, mientras que un mensaje de éxito confirma que resolvió todos los errores y envió el formulario correctamente.
Criterios de éxito adicionales
WCAG 2.2 introdujo los siguientes criterios de éxito que se enfocan en experiencias de formularios más accesibles:
Verifica tu comprensión
Pon a prueba tus conocimientos sobre formularios accesibles
¿Cuál de las siguientes opciones es la entrada de formulario más accesible?
Email address: <input type="email" required><label>Email address: <input type="email" required></label><label>Email address: <input type="email" required autocomplete="email"></label><label>Email address (required): <input type="email" required aria-describedby="email-validation"> <span id="email-validation" class="validation-message">Please provide a valid email address using the format name@place.com</span></label>