Nivel 2: Contenidos y diseño accesibles · Diseño y contenidos
N2-C4 Diseño de interfaces accesibles
Muchas barreras de accesibilidad se deciden antes de escribir una línea de código: en el diseño. Este curso enseña a diseñar interfaces coherentes, orientadoras y responsive; a decidir qué es cada componente y dibujar todos sus estados; a cuidar el foco, el tamaño de los objetivos, los gestos, el movimiento y los límites de tiempo; y a diseñar formularios que no generen errores. Termina con un método para validar los diseños antes de entregarlos y anotarlos en Figma para que desarrollo tenga todo lo que necesita.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 124 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 diseñar layouts coherentes entre páginas, con navegación y ayuda en posiciones predecibles, y que funcionan en cualquier tamaño y orientación.
- Al terminar sabrás diseñar la orientación de un sitio: patrón de títulos, encabezados descriptivos, enlace para saltar al contenido, varias vías de acceso e indicadores de paso (2.4.1, 2.4.2, 2.4.5, 2.4.6).
- Decidirás si cada elemento es un botón o un enlace, diseñarás todos sus estados sin depender del color y especificarás el contenido emergente conforme a 1.4.13.
- Podrás diseñar estados de foco visibles, objetivos táctiles de al menos 24 por 24 píxeles y alternativas a gestos complejos y arrastres.
- Sabrás diseñar formularios con etiquetas visibles, instrucciones, mensajes de error útiles, sin pedir datos repetidos y con autenticación accesible.
- Controlarás en el diseño el movimiento, los destellos, los límites de tiempo y los mensajes dinámicos (2.2.1, 2.2.2, 2.3.1, 4.1.3).
- Validarás un diseño con seis pruebas de estrés (320 px, texto ampliado, sin color, recorrido de teclado, lectura lineal y estados olvidados) y sabrás cuándo hace falta probar con personas usuarias.
- Podrás producir anotaciones de accesibilidad en Figma (encabezados, orden de foco, nombres, estados, alt) como entregable para desarrollo.
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: Layout, consistencia (3.2.3, 3.2.4, 3.2.6) y diseño responsive
- Paso 3: Ejercicio práctico: Dos pantallas del prototipo de un centro cultural
- Paso 4: Lección 3: Navegación y orientación: títulos, encabezados, saltos y múltiples vías (2.4.1, 2.4.2, 2.4.5, 2.4.6)
- Paso 5: Ejercicio práctico: Una sede electrónica con un menú de doce secciones
- Paso 6: Lección 4: Componentes y estados: botón o enlace, estados sin color y contenido emergente (1.4.13)
- Paso 7: Ejercicio práctico: La ayuda emergente del campo IBAN de una cooperativa eléctrica
- Paso 8: Lección 5: Foco visible y no oculto (2.4.7, 2.4.11), tamaño del objetivo (2.5.8) y gestos (2.5.1, 2.5.7)
- Paso 9: Ejercicio práctico: La bolsa de empleo municipal recorrida solo con el teclado
- Paso 10: Ejercicio práctico: La paginación del catálogo de una red de bibliotecas
- Paso 11: Ejercicio práctico: El filtro de precio de un portal de alquiler
- Paso 12: Lección 6: Diseñar formularios: etiquetas, ayudas y errores (3.3.1 a 3.3.8)
- Paso 13: Ejercicio práctico: El inicio de sesión del área privada de una mutualidad
- Paso 14: Ejercicio práctico: La inscripción en las escuelas deportivas de un ayuntamiento
- Paso 15: Lección 7: Movimiento, tiempo y contenido dinámico (2.2.1, 2.2.2, 2.3.1, 4.1.3)
- Paso 16: Lección 8: Revisar y validar el diseño antes de entregarlo: pruebas de estrés y personas usuarias
- Paso 17: Ejercicio práctico: La revista digital de una cooperativa agraria con su aviso de cookies
- Paso 18: Lección 9: Anotar la accesibilidad en los diseños (Figma): entregables para desarrollo
- Paso 19: Ejercicio práctico: La hoja de anotaciones de una tarjeta de producto
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación