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
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.
0 de 20 pasos completados
- 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