Construyendo formularios accesibles

Por qué importa la accesibilidad

Esto es una prueba a ver si funciona :)

La accesibilidad web garantiza que las personas con discapacidad puedan percibir, comprender, navegar e interactuar con los sitios web. Los formularios suelen ser los puntos de interacción más críticos y, sin embargo, con frecuencia son los más inaccesibles.

Etiqueta cada campo

Todo control de formulario debe tener una etiqueta asociada. Nunca dependas únicamente del texto del placeholder.

<label for="email">Email Address</label>
<input type="email" id="email" name="email" required />

Mensajes de error

Haz que los errores sean claros y accionables. Asocia cada error con el campo correcto usando aria-describedby.

<input
  type="email"
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
/>
<span id="email-error">Please enter a valid email address.</span>

Agrupa campos relacionados

Usa <fieldset> y <legend> para agrupar controles relacionados, como los botones de radio.

<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email" /> Email</label>
  <label><input type="radio" name="contact" value="phone" /> Phone</label>
</fieldset>

Navegación con teclado

Asegúrate de que todos los controles del formulario se puedan alcanzar y manejar usando solo el teclado. Prueba con Tab, Shift+Tab, Enter y Espacio.

Contraste de color

El texto y los elementos interactivos deben tener una relación de contraste de al menos 4.5:1 con respecto a su fondo. Usa herramientas como el WebAIM Contrast Checker para verificarlo.

Pequeños cambios en el marcado de un formulario marcan una diferencia enorme para millones de usuarios.