Un formulario es un elemento que permite a un usuario proporcionar datos en un campo o en 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 comprender desde la perspectiva de la accesibilidad, ya que requieren conocimientos de todos los elementos que ya abarcamos, así como reglas adicionales específicas solo de los 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 un componente de este curso. Este módulo se enfocará en los lineamientos específicos para el formulario, pero todos los demás lineamientos que aprendiste en los módulos anteriores, como la estructura de contenido, el enfoque del teclado y el contraste de color, también se aplican a los elementos del formulario.
Campos
La columna vertebral de las formas son los campos. Los campos son pequeños patrones interactivos, como un elemento de botón de selección o entrada, que permiten a los usuarios ingresar contenido o hacer una elección. Hay una amplia 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 características y funcionalidades (como estados de campo, propiedades y valores) están integradas de manera inherente en los elementos HTML, mientras que debes agregar ARIA personalizado de forma manual.
ARIA
<div role="form" id="sundae-order-form"> <!-- form content --> </div>
HTML
<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 usuarios-agentes y las tecnologías de accesibilidad (AT).
Los atributos de Autocomplete 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 la lectura y aquellos que usan TA, como los 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 del formulario no deben producir cambios contextuales cuando reciben enfoque o entradas del usuario, a menos que el usuario haya recibido una advertencia sobre el comportamiento antes de usar el componente. Por ejemplo, un formulario no se debe enviar automáticamente cuando un campo recibe el foco o una vez que un usuario le agrega contenido.
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 del formulario a los usuarios.
Uno de los principios fundamentales de las formas 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 del formulario relacionados, como una dirección de correo postal, deben agruparse de manera programática y visual. Un método es usar el conjunto de campos/patrón de leyenda para agrupar elementos que sean similares.
Descripciones
El propósito de las descripciones de campos es similar al de las etiquetas, ya que se usan para brindar más contexto al campo y a los requisitos. Las descripciones de campos no son necesarias 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 de formato, como retransmitir información sobre la longitud mínima de entrada de un campo de contraseña o indicarle a un usuario qué formato de calendario debe usar (como MM-DD-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 atributo aria-describedby al elemento del formulario, además de un elemento <label>. El lector de pantalla leerá tanto la descripción como 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 todas las AT que planeas admitir.
Errores
Cuando creas formularios accesibles, hay muchas formas de evitar que los usuarios cometan errores de formulario. Anteriormente en este módulo, abordamos el marcado de campos con claridad, la creación de etiquetas de identificación y la adición de descripciones detalladas siempre que sea posible. Sin embargo, no importa lo claro que creas que es el formulario, con el tiempo, los usuarios cometen un error.
Cuando un usuario encuentra un error de formulario, el primer paso es dar a conocer el error. El campo en el que se produjo el error debe identificarse claramente, y el error en sí debe describirse al usuario en forma de texto.
Existen diferentes métodos para mostrar mensajes de error, como los siguientes:
- Una ventana modal modal, intercalada cerca de donde ocurrió 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 en vivo ARIA cuando anuncies errores.
Siempre que sea posible, ofrece al usuario una sugerencia detallada sobre cómo solucionar el error. Hay dos atributos disponibles para notificar a los usuarios sobre los errores.
- Puedes usar el atributo HTML obligatorio El navegador proporcionará un mensaje de error genérico basado en los parámetros de validación presentados.
- O puedes utilizar el atributo aria-required para compartir un mensaje de error personalizado a las AT. Solo los AT 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 considere que se corrigieron todos los errores, permítele volver a enviar el formulario y brindar comentarios sobre los resultados del envío. Un mensaje de error le indica al usuario que tiene más actualizaciones para hacer, y un mensaje de éxito confirma que se corrigieron todos los errores y se envió correctamente el formulario.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre los formularios accesibles
¿Cuál de las siguientes respuestas 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>