Presentación del curso en vídeo

0:00 Componentes interactivos accesibles

Hola, y bienvenida a Componentes interactivos accesibles, un curso del nivel 3 de la certificación de ADDAW, el del desarrollo web accesible. Vamos a trabajar con los patrones de la APG, la guía que publica el W3C. Es un curso para quien desarrolla, diseña o audita interfaces. Y también para quien encarga aplicaciones web.

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

Todo empieza con una decisión sencilla que se toma mal a diario. El enlace te lleva a otro sitio. El botón hace algo en la página. Mira este «Ver carrito» hecho con un enlace vacío. Pulsas la barra espaciadora y… nada de nada. Con un botón de verdad, responde a la primera. Y cada nombre tiene que entenderse fuera de contexto. Nada de diez «Leer más» iguales.

0:47 Una parada de tabulador, muchas flechas

Barras de herramientas, pestañas, listas y árboles siguen la misma regla. El tabulador salta de un componente a otro. Y una vez dentro, te mueves con las flechas. Hay dos técnicas que lo hacen posible, y las verás las dos. Con roving tabindex, el foco se mueve de verdad de un elemento a otro. Con el atributo aria-activedescendant, en cambio, el foco se queda quieto en su sitio.

1:11 Menús y pestañas

Con los menús hay mucha confusión. La navegación principal de una web no es un menú de aplicación. Es una lista de enlaces, con botones que despliegan los submenús. El menú de acciones, como «Más opciones», es otra cosa: se recorre con las flechas y se cierra con Escape. Y las pestañas enseñan un solo panel cada vez, con la pestaña activa siempre marcada.

1:35 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. Escucha: «3 resultados disponibles.»

1:56 Diálogos, acordeones y tooltips

Estos tres componentes tienen algo en común: muestran y ocultan contenido. El diálogo modal recibe el foco dentro, se cierra con Escape y devuelve el foco a su origen, el botón que lo abrió. El acordeón no tiene misterio: 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.

2:23 Controles de valor

El filtro de precio, el selector de cantidad de la cesta o el interruptor de avisos del banco tienen algo en común: 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. Así suena uno bien hecho: «Avisos, interruptor, activado.»

2:50 Carruseles, tablas y arrastrar

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

3:11 Á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 ojo: si los datos solo se leen, lo correcto es una tabla normal.

3:32 Por qué importa

Detrás de cada componente hay personas reales. Quien navega solo con teclado por una lesión. O quien usa un 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 de propina: un componente bien hecho tiene menos código y menos errores.

3:55 Lo que sabrás hacer

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