¿Qué consideraciones de accesibilidad debo tener con los formularios HTML?

Los formularios accesibles son cruciales para que todos los usuarios puedan interactuar con tu sitio. Aquí tienes las consideraciones más importantes:

1. Etiquetas (<label>) claras y asociadas: cada control de formulario (<input>, <textarea>, <select>) necesita una etiqueta descriptiva. Asócialas correctamente usando el atributo for en la etiqueta, que coincida con el id del control, o envolviendo el control con la etiqueta.
   <label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">
<input type="checkbox" id="acepto" name="acepto_terminos">
<label for="acepto">Acepto los términos y condiciones</label>
2. Agrupación de controles relacionados (<fieldset> y <legend>): cuando tengas un grupo de controles relacionados (como varios botones de radio para una misma pregunta), agrúpalos con <fieldset> y proporciona un título para el grupo con <legend>.
   <fieldset>
<legend>Tipo de notificación preferida:</legend>
<input type="radio" id="email" name="notificacion" value="email">
<label for="email">Correo electrónico</label>
<br>
<input type="radio" id="sms" name="notificacion" value="sms">
<label for="sms">SMS</label>
</fieldset>
3. Indicación de campos obligatorios: marca claramente los campos obligatorios. Puedes usar un asterisco (*) visible junto a la etiqueta y, además, el atributo required en el control del formulario. Para mayor robustez, considera aria-required="true".
   <label for="correo">Correo electrónico <span aria-hidden="true">*</span>:</label>
<input type="email" id="correo" name="correo" required aria-required="true">
4. Instrucciones y mensajes de error útiles:
   • Proporciona instrucciones claras donde sea necesario (por ejemplo, formato esperado para una fecha).
   • Los mensajes de error deben ser específicos, fáciles de entender y estar asociados programáticamente al control correspondiente, a menudo usando aria-describedby para que los lectores de pantalla los anuncien. El foco debería moverse al primer campo con error tras un intento de envío fallido.
5. Navegación y operativa por teclado: asegúrate de que se puede acceder y operar cada control del formulario usando solo el teclado, en un orden lógico.
6. Contraste y estilos de foco: todos los controles, etiquetas y mensajes deben tener suficiente contraste de color. El indicador de foco debe ser claro.
7. Evita usar «placeholder» como etiqueta: el texto del atributo placeholder desaparece al escribir y no es un sustituto accesible para una <label>. Úsalo solo para sugerencias o ejemplos de formato.

Prestando atención a estos puntos, tus formularios serán mucho más usables para personas con diversas capacidades.