Presentación del curso en vídeo

0:00 Diseño de interfaces accesibles

Te damos la bienvenida a Diseño de interfaces accesibles, el cuarto curso del nivel 2 de la Certificación ADDAW. Muchas barreras se deciden en el diseño, antes del código: son decisiones que abren o cierran puertas. El curso es para diseño, producto, desarrollo y auditoría.

0:17 Layout coherente y responsive

Empezamos por la base. Una interfaz predecible mantiene el mismo orden y los mismos nombres en todo el sitio. La ayuda está siempre en el mismo lugar, también durante el pago. Y el diseño funciona a 320 píxeles de ancho y en cualquier orientación, porque así lo usan muchas personas con zoom.

0:36 Saber siempre dónde estás

Después, la orientación. Los títulos de página ponen lo específico primero. Los encabezados describen su bloque. Un enlace para saltar al contenido ahorra cuarenta pulsaciones de teclado. Y siempre hay más de una vía para llegar a cada página, como el menú y el buscador.

0:53 Botón o enlace, y todos sus estados

Cada componente empieza con una decisión. Un enlace lleva a otro sitio; un botón hace algo en la página. Sus estados, como seleccionado o con error, no dependen solo del color. Y las ayudas emergentes se pueden cerrar con la tecla Escape y no se esfuman cuando intentas leerlas.

1:10 El foco tiene que verse

Quien navega con teclado necesita saber dónde está. Por eso cada componente tiene un estado de foco diseñado, distinto del que aparece al pasar el ratón. Y ese foco nunca queda tapado por cabeceras fijas, banners de cookies ni botones de chat.

1:25 Objetivos que se aciertan y gestos simples

Para acertar con el dedo o con temblor, cada objetivo mide como mínimo 24 por 24 píxeles. Mejor 44 en los controles principales. Y todo lo que se hace arrastrando o deslizando tiene una alternativa de pulsación simple, como unos botones de subir y bajar o un menú Mover a.

1:43 Formularios que ayudan

Los formularios son donde la accesibilidad se vuelve un derecho. Las etiquetas son visibles, nunca solo el texto gris del placeholder. Los errores se explican en texto, con cómo corregirlos. No se pide dos veces el mismo dato. Y al iniciar sesión no hay exámenes de memoria: se puede pegar la contraseña.

2:03 Movimiento y tiempo bajo control

La persona controla el ritmo. Lo que se mueve solo, como un carrusel, se puede pausar. Antes de que caduque la sesión hay un aviso, con al menos 20 segundos para ampliarla. Y los mensajes como Producto añadido se anuncian al lector de pantalla sin robar el foco.

2:19 Validar antes de entregar

Antes de entregar, el diseño pasa seis pruebas de estrés. Lo ves a 320 píxeles, con texto ampliado y sin color. Haces el recorrido de teclado y una lectura lineal, como un lector de pantalla. Y dibujas los estados vacíos, de error y de carga, los que más se olvidan.

2:37 Anotar para desarrollo

Lo que no se anota, no se construye. En Figma anotas encabezados, orden de foco y el nombre exacto de cada botón de icono. También los estados, las teclas que operan cada componente y los anuncios dinámicos. Cada nota se convierte en un criterio de aceptación comprobable.

2:54 Por qué importa

Piensa en una persona mayor con baja visión que quiere pedir cita sin ayuda de nadie. Además, es obligatorio: el Real Decreto 1112 de 2018 lo exige al sector público y la Ley 11 de 2023, a muchos servicios privados. Y corregir en diseño cuesta minutos; después del desarrollo, semanas.

3:16 Al terminar sabrás

Al terminar sabrás diseñar pantallas predecibles y orientadoras. Sabrás especificar componentes, estados y formularios. Y sabrás validar y anotar tus diseños para que lleguen bien al código. Empieza por la primera lección, con un proyecto propio a mano.