Formularios accesibles: labels, ayudas y errores

Diseño e implementación de formularios que se entienden, se completan y se corrigen sin fricción.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Patrones de formulario que funcionan en producto real, no solo en demos.

Etiqueta siempre visible

No dependas de placeholder como sustituto de label.

Ayuda previa

Indica formato o restricciones antes del error, con `aria-describedby`.

Error accionable

Explica exactamente qué está mal y cómo resolverlo.

Estado inválido

Sincroniza mensaje y control usando `aria-invalid`.

Orden de foco

Al enviar, mueve foco al primer error o al resumen de errores.

Éxito claro

Confirma guardado/envío con mensaje visible y anunciado.

Aplicación en proyectos reales

Cómo auditar formularios existentes y priorizar correcciones útiles.

Empieza por formularios de alta conversión: registro, pago, contacto y recuperación.

Prueba con entradas vacías, formato erróneo y navegación solo con teclado.

Mide antes y después: tiempo de completado, errores por campo y abandono del flujo.

Define criterios mínimos de accesibilidad para cualquier formulario nuevo.
Unifica componentes de input, error y ayuda para todo el proyecto.
Evita validaciones sorpresivas que cambian foco sin contexto.
Registra casos de error frecuentes y ajusta microcopy según datos reales.

Patrón de código

Base de campo con etiqueta, ayuda y región de error preparada para anuncio.

Campo accesible completo

<label for="telefono">Teléfono</label>
<input id="telefono" type="tel" aria-describedby="ayuda-telefono error-telefono" />
<p id="ayuda-telefono">Formato: +34 600 000 000</p>
<p id="error-telefono" role="alert"></p>

1 Claves teóricas 2 Aplicación en proyectos reales 3 Patrón de código

🧪 Aprende probando

Ejemplo Demo guiada Valida un formulario con feedback claro sin romper foco.

⌄

🏁 Retos

Reto Reto práctico Añade estado inválido y error anunciado a un campo sin feedback.

⌄

🧰 Recursos

Enlaces útiles

W3C WAI Fundamentals MDN Accessibility WCAG 2.1 Quick Reference ARIA Authoring Practices Guide

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Test de Accesibilidad Web

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 05

Enlaces y botones con semántica correcta

Lección 07

Teclado y foco visible sin trampas

›