En la lección anterior aseguramos que el contenido se pueda percibir. Pero percibir no es suficiente: una vez que Lucía (movilidad reducida, navega solo con teclado) ve el filtro del catálogo de Cursalia, tiene que poder abrirlo, moverse por sus opciones y activar una sin tocar el ratón. El segundo principio POUR, Operable, exige que todos los componentes de la interfaz y la navegación se puedan manejar. Cubre el teclado, el tiempo, las convulsiones, la navegación y las modalidades de entrada (puntero, gestos, movimiento). Es el principio que más de cerca protege a Lucía, pero también a Marta, que opera con teclado guiada por su lector, y a cualquiera que use un conmutador o control por voz.

1. Qué exige el principio Operable
2. Pauta 2.1: Accesible por teclado
3. Pauta 2.2: Tiempo suficiente
4. Pauta 2.3: Convulsiones y reacciones físicas
5. Pauta 2.4: Navegable
6. Pauta 2.5: Modalidades de entrada
7. Tabla resumen de criterios
8. Errores comunes y consejos
9. Ejercicios
10. Conclusión

Operable significa que cualquier acción que se pueda hacer con el ratón se pueda hacer también de otra forma, principalmente con el teclado, y que la navegación sea previsible: foco visible, orden lógico, tiempo suficiente y objetivos alcanzables. Cinco pautas lo estructuran.

Toda la funcionalidad debe estar disponible desde el teclado.

• 2.1.1 Teclado (A): cada función se puede usar con teclado (Tab, Enter, Espacio, flechas). Si el filtro de Cursalia solo se abre con clic de ratón, Lucía queda fuera.
• 2.1.2 Sin trampas de teclado (A): el foco debe poder entrar y salir de cualquier componente. Un modal de matrícula que atrapa el Tab dentro para siempre es una "trampa": Lucía no puede escapar.
• 2.1.4 Atajos de tecla de carácter (A): si existen atajos de una sola tecla (p. ej. "b" para buscar), deben poder desactivarse, remapearse o exigir foco; si no, el control por voz de otro usuario los dispara sin querer.

La construcción real de widgets operables por teclado (menús, desplegables, modales) se detalla en el Módulo 5: Widgets JS / Teclado. Aquí fijamos el requisito.

Dar a los usuarios el tiempo necesario para leer y usar el contenido.

• 2.2.1 Tiempo ajustable (A): si hay un límite de tiempo (una sesión que caduca, un cuestionario cronometrado), el usuario debe poder desactivarlo, ajustarlo o ampliarlo. Hugo (TDAH) necesita más tiempo en un test.
• 2.2.2 Poner en pausa, detener, ocultar (A): todo contenido que se mueva, parpadee o se actualice solo (un carrusel de cursos destacados en la landing) debe poder pausarse. El movimiento constante distrae a Hugo y dificulta la lectura a Sofía.

• 2.3.1 Umbral de tres destellos (A): nada debe destellar más de tres veces por segundo (o mantenerse bajo los umbrales seguros). Un banner promocional de Cursalia con parpadeo intenso podría provocar una crisis a personas con epilepsia fotosensible.

Ayudar a los usuarios a navegar, encontrar contenido y saber dónde están.

• 2.4.1 Evitar bloques (A): ofrecer un enlace de salto ("Saltar al contenido") para no tabular por la cabecera y el menú en cada página. Lucía lo agradece en cada carga.
• 2.4.2 Título de página (A): cada página/vista tiene un <title> descriptivo. En la SPA, al cambiar de vista hay que actualizarlo.
• 2.4.3 Orden del foco (A): el orden de tabulación sigue un flujo lógico y coherente con el significado.
• 2.4.4 Propósito del enlace (en contexto) (A): el texto del enlace debe dejar claro su destino. Diez enlaces "Ver más" idénticos no sirven; "Ver más sobre Accesibilidad Web" sí.
• 2.4.6 Encabezados y etiquetas (AA): encabezados y etiquetas descriptivos. Marta navega el panel del alumno saltando por encabezados; si dicen "Sección 1", no la orientan.
• 2.4.7 Foco visible (AA): el elemento con foco debe tener un indicador visible. Quitar el outline sin sustituto deja a Lucía sin saber dónde está.
• 2.4.11 Foco no oscurecido (mínimo) (AA) — nuevo en WCAG 2.2: el elemento enfocado no debe quedar totalmente tapado por otro contenido (una barra fija, una cookie banner). Si el foco baja detrás del encabezado pegajoso de Cursalia, Lucía no lo ve.

El diseño del indicador de foco y de la navegación por teclado en widgets se implementa en el Módulo 5.

Facilitar el uso con distintos dispositivos, más allá del teclado (táctil, puntero, movimiento).

• 2.5.1 Gestos del puntero (A): toda acción que use gestos multipunto o basados en trayectoria (deslizar el carrusel) debe tener también una alternativa de un solo puntero (botones anterior/siguiente).
• 2.5.2 Cancelación del puntero (A): una acción no debe ejecutarse en el mousedown; debe poder cancelarse soltando fuera. Evita activaciones accidentales, útil para temblor motor.
• 2.5.3 Etiqueta en el nombre (A): el nombre accesible de un control debe incluir el texto visible. Si el botón dice "Matricular" pero su nombre para la TA es "enviar-form", el control por voz que dice "pulsa Matricular" falla.
• 2.5.4 Actuación por movimiento (A): si algo se activa moviendo o agitando el dispositivo, debe existir alternativa por interfaz y poder desactivarse.
• 2.5.7 Movimientos de arrastrar (AA) — nuevo en 2.2: toda acción de arrastrar (reordenar lecciones en el panel) necesita una alternativa de un solo clic. Lucía no arrastra.
• 2.5.8 Tamaño del objetivo (mínimo) (AA) — nuevo en 2.2: los objetivos táctiles deben medir al menos 24×24 px (con excepciones por espaciado). Botones diminutos del filtro son difíciles de acertar con temblor o en móvil.

• Quitar el outline de foco "porque es feo". Es la causa número uno de incumplir 2.4.7. Si no gusta el estilo por defecto, se rediseña, no se elimina.
• Modales que atrapan el foco (2.1.2) o que lo pierden al cerrarse. El foco debe poder salir y volver a un punto lógico.
• Cabeceras fijas que tapan el elemento enfocado (2.4.11). Muy común con position: sticky; hay que reservar espacio o desplazar el scroll.
• Confiar solo en title del enlace o en el color para su propósito. 2.4.4 exige que el texto del enlace se entienda.
• Consejo: haz la "prueba del ratón desenchufado". Guarda el ratón y recorre una superficie completa de Cursalia solo con Tab, Shift+Tab, Enter, Espacio y flechas. Si te quedas atascado o pierdes el foco, tienes un fallo Operable.

Ejercicio 1. El filtro desplegable del catálogo se abre y se cierra solo con clic; sus opciones se seleccionan con el ratón. Enumera al menos dos criterios que probablemente se incumplen y qué exige cada uno.

Ejercicio 2. En el panel del alumno, las lecciones se reordenan arrastrándolas con el ratón. ¿Qué criterio de WCAG 2.2 aplica y cuál es la alternativa mínima exigida para Lucía?

Ejercicio 3. El botón "Matricular" muestra ese texto, pero su nombre accesible (etiqueta interna) es "cta-1". Un usuario de control por voz dice "pulsa Matricular" y no ocurre nada. ¿Qué criterio falla y qué exige?

Solución 1. Al menos: 2.1.1 Teclado (A) —toda la funcionalidad del filtro debe poder operarse con teclado— y 2.4.7 Foco visible (AA) si al recorrerlo no se ve dónde está el foco. También puede aparecer 2.4.3 Orden del foco (A) si al abrirlo el orden de tabulación es incoherente. La corrección conceptual: el desplegable debe abrirse, recorrerse y activarse con teclado, con foco visible (implementación en el Módulo 5).

Solución 2. Aplica 2.5.7 Movimientos de arrastrar (AA), nuevo en WCAG 2.2. Exige ofrecer una alternativa que no requiera arrastrar, por ejemplo botones "subir/bajar" o un menú con posiciones, activables con un solo clic o con teclado.

Solución 3. Falla 2.5.3 Etiqueta en el nombre (A): el nombre accesible del control debe contener el texto visible ("Matricular"). Así, cuando el usuario de voz nombra lo que ve, la TA lo encuentra. (El nombre accesible se implementa en el Módulo 4.)

El principio Operable exige que la interfaz completa se pueda manejar sin ratón: teclado sin trampas, tiempo suficiente, ausencia de destellos peligrosos, navegación con foco visible y ordenado, y objetivos de entrada alcanzables por puntero, gesto o movimiento. WCAG 2.2 refuerza esto con criterios nuevos (2.4.11, 2.5.7, 2.5.8) muy pegados al uso real de Lucía. Ya podemos percibir y operar; falta que la persona entienda qué está pasando: que el idioma esté declarado, que la interfaz sea predecible y que los errores del formulario de matrícula se expliquen y se puedan corregir. Eso es el principio Comprensible, que abordamos en la lección 03-03.