Nivel 3: Desarrollo web accesible · Desarrollo web
N3-C2 Formularios accesibles
Los formularios son el punto donde una web deja de informar y empieza a prestar servicio (una solicitud, una compra, un registro) y también donde más personas se quedan fuera. Este curso enseña a etiquetar, agrupar y explicar los campos, a entender lo que anuncia un lector de pantalla, a validar y comunicar errores y a aprovechar autocomplete. También a construir controles, autenticaciones, CAPTCHA, selectores y procesos de varios pasos que no excluyan a nadie.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 120 minutos
- 10 ejercicios prácticos
- Test de práctica ilimitado
Contenido revisado el 26/10/2026 · Historial de actualizaciones · Cómo se elabora y se evalúa
Objetivos
- Al terminar sabrás asociar etiquetas, instrucciones y ayudas a cada campo con label, fieldset, legend y aria-describedby.
- Implementarás validación y mensajes de error conformes a 3.3.1, 3.3.2 y 3.3.3 usando aria-invalid, aria-describedby y regiones activas.
- Aplicarás autocomplete para cumplir 1.3.5 Identificar el propósito de la entrada y evitarás pedir datos repetidos conforme a 3.3.7 Entrada redundante.
- Diseñarás procesos de autenticación que cumplan 3.3.8 y resolverás CAPTCHA, selects personalizados y selectores de fecha sin barreras.
- Comprenderás cómo calcula el navegador el nombre accesible de un campo y aplicarás 2.5.3 Etiqueta en el nombre para que funcione con lector de pantalla y control por voz.
- Implementarás en CSS bordes, estados y foco con contraste suficiente (1.4.11, 2.4.7) que resistan el zoom, el reflow y el modo de colores forzados.
- Construirás casillas, interruptores, campos de archivo, deslizadores y contadores accesibles partiendo de los controles nativos.
- Diseñarás procesos en varios pasos con indicador de progreso, gestión del foco, límites de tiempo ajustables (2.2.1) y sin cambios de contexto inesperados (3.2.2).
El curso, paso a paso
El curso es guiado: después de cada lección haces un test corto y, cuando toca, uno o varios ejercicios prácticos con una página real que revisar. Al superarlos se abre el paso siguiente.
Todas las lecciones se pueden leer libremente. Para hacer los tests, los ejercicios prácticos, guardar tu avance y optar al examen y al certificado, matricúlate.
- Paso 1: Lección 1: Presentación del curso en vídeo
- Paso 2: Lección 2: Etiquetas, agrupación e instrucciones
- Paso 3: Ejercicio práctico: El formulario «Pide información» de una academia de idiomas
- Paso 4: Ejercicio práctico: La elección del canal de notificación en una sede electrónica
- Paso 5: Lección 3: Cómo se anuncia un campo: nombre accesible, estados y 2.5.3 Etiqueta en el nombre
- Paso 6: Ejercicio práctico: El alta en el servicio de bicicleta pública, revisada en el inspector
- Paso 7: Lección 4: Validación y mensajes de error
- Paso 8: Ejercicio práctico: La inscripción en una carrera popular cuando algo sale mal
- Paso 9: Ejercicio práctico: Los mensajes de error de una comunicación de obra menor
- Paso 10: Lección 5: autocomplete, propósito de entrada (1.3.5) y entrada redundante (3.3.7)
- Paso 11: Ejercicio práctico: Los datos personales del carné de una red de bibliotecas
- Paso 12: Ejercicio práctico: La compra en cuatro pasos de una tienda de semillas
- Paso 13: Lección 6: Estados visibles en CSS: contraste, foco, colores forzados y reflow
- Paso 14: Ejercicio práctico: Las casillas con estilo propio de un diario digital
- Paso 15: Lección 7: Casillas, interruptores, archivos y otros controles especiales
- Paso 16: Lección 8: Autenticación accesible (3.3.8), CAPTCHA, selects y selectores de fecha
- Paso 17: Ejercicio práctico: El acceso a la banca en línea de una caja comarcal
- Paso 18: Lección 9: Procesos en varios pasos: progreso, tiempo límite (2.2.1) y cambios de contexto (3.2.2)
- Paso 19: Ejercicio práctico: La cita previa de una oficina de empleo
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación