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 entrada y, a veces, un CAPTCHA.
Los formularios se consideran uno de los elementos más difíciles de hacer correctamente desde una perspectiva de accesibilidad, ya que requieren conocimiento de todos los elementos que ya abordamos, así como reglas adicionales específicas solo para formularios. Con un poco de comprensión 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. Este módulo se centrará 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, enfoque del teclado y el contraste de color, también se aplican a los elementos de formulario.
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. Existe una amplia variedad de campos de formulario para elegir.
La recomendación predeterminada es usar patrones HTML establecidos en lugar de crear algo personalizado con ARIA, ya que ciertas funciones, como los estados, las propiedades y los valores de los campos, están integradas en los elementos HTML. Los campos personalizados requieren que agregues ARIA de forma manual.
No se recomienda: HTML personalizado con ARIA
<div role="form" id="sundae-order-form">
<!-- form content -->
</div>
Se recomienda: 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 autocompletar HTML a tus campos. Agregar atributos de autocompletar permite una definición o identificación más detallada del propósito para los agentes de usuario y las tecnologías de asistencia (TA).
Los atributos de autocompletar permiten a los usuarios personalizar las presentaciones visuales, como mostrar un ícono de pastel de cumpleaños en un campo con el atributo de autocompletar de cumpleaños (bday) asignado. En general, 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 TA, 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 el foco o la entrada 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 foco o cuando un usuario agrega contenido al campo.
Etiquetas
Las etiquetas informan a un usuario sobre el propósito de un campo, si el campo es obligatorio y también pueden proporcionar información sobre los requisitos del campo, como el formato de entrada. Las etiquetas deben ser visibles en todo momento y describir con precisión el campo de 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 cierto tanto visual como programáticamente. 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 visual y programáticamente. Un método es usar el patrón fieldset y legend 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 dar 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 agregar información adicional es útil 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-AAAA).
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
aria-describedby
atributo al elemento de formulario, además de un <label> elemento. El lector de pantalla leerá la descripción y la etiqueta.
Si agregas el
aria-labelledby
atributo 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 todas las TA que planeas admitir.
Errores
Cuando creas formularios accesibles, puedes hacer mucho para evitar que los usuarios cometan errores en los formularios. Anteriormente en este módulo, abordamos cómo marcar claramente los campos, crear etiquetas de identificación y agregar descripciones detalladas siempre que sea posible. Pero, sin importar lo claro que creas que es tu formulario, en algún momento, un usuario cometerá un error.
Cuando un usuario encuentra un error en el formulario, el primer paso es darlo a conocer. El campo en el que se produjo el error debe identificarse claramente, y el error en sí debe describirse al usuario en texto.
Existen diferentes métodos para mostrar mensajes de error, como los siguientes:
- Un modal, intercalado cerca de donde se produjo el error
- Una colección 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 activa de ARIA cuando anuncies errores.
Siempre que sea posible, ofrécele al usuario una sugerencia detallada sobre cómo corregir el error. Existen dos atributos disponibles para notificar a los usuarios sobre los errores.
- Puedes usar el atributo HTML required. El navegador proporcionará un mensaje de error genérico basado en los parámetros de validación presentados.
- También puedes usar el atributo aria-required para compartir un mensaje de error personalizado con las TA. Solo las TA recibirán el mensaje, a menos que agregues código adicional para que el mensaje sea visible para todos los usuarios.
Una vez que un usuario crea que se resolvieron todos los errores, permítele volver a enviar el formulario y proporcionar comentarios sobre los resultados del envío. Un mensaje de error le indica a un usuario que debe realizar más actualizaciones, 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 centran en experiencias de formularios más accesibles: