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