Presentación del curso en vídeo

0:00 Componentes interactivos accesibles

Te damos la bienvenida a Componentes interactivos accesibles, un curso del nivel 3 de la Certificación ADDAW, dedicado al desarrollo web accesible. Trabajaremos con los patrones de la guía APG, publicada por el W3C. Es un curso para quien desarrolla, diseña o audita interfaces, y también para quien encarga aplicaciones web.

0:21 Botón o enlace: la primera decisión

Todo empieza con una decisión sencilla que se toma mal a diario. El enlace lleva a otro sitio; el botón hace algo en la página. Un «Ver carrito» hecho con un enlace vacío no responde a la barra espaciadora. Y cada nombre debe entenderse fuera de contexto: nada de diez «Leer más» iguales.

0:39 Una parada de tabulador, muchas flechas

Barras de herramientas, pestañas, listas y árboles siguen la misma regla: el tabulador salta entre componentes y las flechas se mueven dentro. Verás las 2 técnicas que lo hacen posible. Con roving tabindex, el foco se mueve de verdad. Con el atributo aria-activedescendant, el foco se queda en su sitio.

0:59 Menús y pestañas

La navegación principal de una web no es un menú de aplicación: es una lista de enlaces con botones que despliegan submenús. El menú de acciones, como «Más opciones», se recorre con flechas y se cierra con Escape. Y las pestañas muestran un solo panel visible, con la pestaña activa siempre marcada.

1:17 Buscadores con sugerencias

El buscador de estaciones de una web de transporte es un combobox. Mientras escribes, el foco se queda en el campo. Las flechas resaltan una sugerencia e Intro la acepta. Y una región de estado anuncia cuántos resultados hay, para que quien no ve la lista sepa que existe.

1:35 Diálogos, acordeones y tooltips

Estos tres componentes muestran y ocultan contenido. El diálogo modal recibe el foco dentro, se cierra con Escape y devuelve el foco a su origen. El acordeón es un encabezado con un botón. Y el tooltip debe ser descartable, señalable y persistente, como exige el criterio 1.4.13 de las pautas WCAG.

1:56 Controles de valor

El filtro de precio, el selector de cantidad de la cesta o el interruptor de avisos del banco sirven para fijar un valor. Deslizadores y selectores de cantidad exponen su valor actual, su mínimo y su máximo. Los interruptores tienen un nombre fijo y anuncian si están activados o desactivados.

2:15 Carruseles, tablas y arrastrar

Si un carrusel se mueve más de 5 segundos, necesita un control de pausa. En una tabla con veinte botones «Editar», cada acción de fila necesita un nombre propio. Y todo lo que se arrastra, como las tarjetas de un tablero, necesita una alternativa sin arrastre, según el criterio 2.5.7.

2:34 Árboles y rejillas de datos

Las aplicaciones de gestión añaden dos estructuras exigentes. El árbol de carpetas se abre y se cierra con las flechas, como en el explorador de archivos. La rejilla permite trabajar celda a celda, como en una hoja de cálculo. Pero si los datos solo se leen, lo correcto es una tabla normal.

2:51 Por qué importa

Detrás de cada componente hay personas reales: quien navega solo con teclado por una lesión, o quien usa lector de pantalla para pagar un recibo. Desde el 28 de junio de 2025, la Ley 11 de 2023 exige accesibilidad al comercio electrónico y a la banca. Y un componente bien hecho tiene menos código y menos errores.

3:11 Lo que sabrás hacer

Al terminar sabrás elegir el patrón adecuado o, mejor aún, el HTML nativo que lo hace por ti. Sabrás implementar el teclado completo de cada componente y probarlo con teclado y con lector de pantalla. Al final te espera un caso práctico con una tienda en línea. ¡Empecemos!