Formularios

Un formulario es un elemento que permite a un usuario proporcionar datos a un campo o grupo de campos. Los formularios pueden ser tan simples como un único 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 obtener de un desde la perspectiva de la accesibilidad, ya que requieren conocer todos los elementos que que ya abarcamos, así como reglas adicionales específicas de los formularios. Con algunos comprensión y tiempo, puedes crear un formulario accesible que se adapte a ti y a tu usuarios.

Formularios es el último módulo específico de este curso. En este módulo, se centrará en las pautas específicas del formulario, pero en todas las demás pautas que aprendiste en los módulos anteriores, como estructura del contenido, foco del teclado y contraste de color, también se aplica a la forma o de terceros.

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 permite a los usuarios ingresar contenido o hacer es tu mejor opción. Hay una amplia variedad de campos de formulario para elegir.

La recomendación predeterminada es usar patrones HTML establecidos en lugar de creando algo personalizado con ARIA, como ciertas funciones y las funcionalidades, como los estados de campo, las propiedades y los valores, son inherentemente integradas en los elementos HTML, mientras que debes agregar ARIA personalizados de forma manual.

<div role="form" id="sundae-order-form">
  <!-- form content -->
</div>

<form id="sundae-order-form">
  <!-- form content -->
</form>

Además de elegir los patrones de campos de formulario más accesibles, donde si corresponde, también debes agregar Atributos de autocompletado de HTML a tus campos. Agregar atributos de autocompletar permite un análisis más detallado definición o identificación del propósito a usuarios-agentes y tecnologías de asistencia (AT).

Los atributos de autocompletar permiten que los usuarios personalicen presentaciones visuales, como mostrar un ícono de pastel de cumpleaños en un campo con la función de autocompletar cumpleaños el atributo (bday) que se le asignó. En términos más generales, los atributos de autocompletado completar formularios es más fácil y rápido. Esto es especialmente útil para las personas con trastornos cognitivos y de lectura y personas que usan TA, como la detección de lectores.

<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 este haya recibido una advertencia sobre el comportamiento antes con 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 al usuario sobre el propósito de un campo. Si el campo es obligatorio, y puede proporcionar información sobre los requisitos del campo, como de un conjunto de datos tengan un formato común. Las etiquetas deben ser visibles en todo momento y describir el formulario con precisión a los usuarios.

Uno de los principios fundamentales de los formularios accesibles es establecer una estructura una conexión precisa entre un campo y su etiqueta. Esto es cierto visualmente de forma programática. Sin este contexto, es posible que un usuario no entienda cómo completa 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 visualmente y de manera programática. Uno de ellos es usar la leyenda de conjunto de campos para agrupar elementos que son similares.

Descripciones

Las descripciones de los campos son similares a las etiquetas en cuanto al propósito, ya que se usan para dar más contexto al campo y a los requisitos. Las descripciones de los campos necesario para la accesibilidad si las etiquetas o las instrucciones del formulario son descriptivas lo suficiente.

Sin embargo, hay situaciones en las que es útil agregar información adicional para evitar errores de formulario, como la retransmisión de información sobre la longitud mínima de entrada para un campo de contraseña o indicándole al usuario qué formato de calendario utilizar (como como MM-DD-AAAA).

Hay muchos métodos que puedes usar para agregar descripciones de campo a tu formularios. Uno de los mejores métodos es agregar aria-describedby al elemento del formulario, además de un elemento <label>. La pantalla el lector leerá tanto la descripción como la etiqueta.

Si agregas el aria-etiquetadapor a tu elemento, el valor del atributo anula el texto dentro de <label> Como siempre, asegúrate de probar el código final con todos los AT que planeas admitir.

Errores

Cuando se crean formularios accesibles, hay muchas medidas que se pueden tomar para impedir que los usuarios cometer errores de formulario. Anteriormente en este módulo, abordamos claramente el lenguaje de marcado campos, crear etiquetas de identificación y agregar descripciones detalladas siempre que como sea posible. Pero por más claro que crees que tu formulario sea, finalmente, un usuario cometeremos un error.

Cuando un usuario encuentra un error de formulario, el primer paso es informar el error. El campo donde ocurrió el error debe estar claramente identificado, y el error debe describirse al usuario en texto.

Existen distintos métodos para mostrar los errores mensajes, como los siguientes:

• Una ventana modal emergente, intercalada cerca de donde ocurrió 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 opciones de regiones en vivo de ARIA a la hora de anunciar errores.

Siempre que sea posible, ofrece al usuario una sugerencia detallada sobre cómo solucionar el problema . 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.
• También puedes utilizar 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 el mensaje sea visible para todos los usuarios.

Una vez que el usuario considere que se resolvieron todos los errores, permítele volver a enviarlo. completar el formulario y proporcionar comentarios sobre los resultados enviados. Un error un mensaje le indica al usuario que debe realizar más actualizaciones, mientras que un mensaje de éxito confirma que resolvieron todos los errores y que envió correctamente el formulario.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre formularios accesibles