¿Cómo construirías un formulario de registro cuyos errores de validación sean de verdad usables, incluso para usuarios de lector de pantalla?

Usa labels reales ligados a los inputs, valida al perder el foco y al enviar en vez de en cada pulsación, y coloca cada mensaje de error junto a su campo con aria describedby apuntando a él más aria invalid en el input. Al enviar, mueve el foco al primer campo inválido o a un resumen de errores. Mantén las restricciones y los tipos nativos para que funcionen los teclados móviles y el autocompletado, y nunca señales un error solo con color.

Empiezo por lo nativo, porque casi todo viene gratis: un label real con su atributo for, el tipo de input correcto para que el móvil muestre el teclado adecuado, atributos de autocomplete para que funcionen los gestores de contraseñas, y required donde aplique. Sobre el momento, valido un campo al perder el foco y todo al enviar, nunca en cada pulsación, porque decirle a alguien que su correo es inválido mientras lo está escribiendo es solo ruido. Una vez que un campo se ha marcado inválido sí revalido según escribe, para que el error desaparezca en cuanto se corrige. Cada mensaje va justo debajo de su input, y el input recibe aria invalid true y aria describedby apuntando al id del mensaje, que es lo que hace que un lector de pantalla anuncie el error cuando el foco llega ahí. Si el envío falla, muevo el foco al primer campo inválido, o a un breve resumen de errores arriba con enlaces a cada campo si son varios. Y los errores nunca van solo por color; hay texto y un icono, porque un borde rojo por sí solo no significa nada para mucha gente.