A la lliçó anterior vam assegurar que el contingut es pugui percebre. Però percebre no n'hi ha prou: un cop la Lucía (mobilitat reduïda, navega només amb teclat) veu el filtre del catàleg de Cursalia, ha de poder obrir-lo, moure's per les seves opcions i activar-ne una sense tocar el ratolí. El segon principi POUR, Operable, exigeix que tots els components de la interfície i la navegació es puguin manejar. Cobreix el teclat, el temps, les convulsions, la navegació i les modalitats d'entrada (punter, gestos, moviment). És el principi que més de prop protegeix la Lucía, però també la Marta, que opera amb teclat guiada pel seu lector, i qualsevol que faci servir un commutador o control per veu.

1. Què exigeix el principi Operable
2. Pauta 2.1: Accessible per teclat
3. Pauta 2.2: Temps suficient
4. Pauta 2.3: Convulsions i reaccions físiques
5. Pauta 2.4: Navegable
6. Pauta 2.5: Modalitats d'entrada
7. Taula resum de criteris
8. Errors comuns i consells
9. Exercicis
10. Conclusió

Operable vol dir que qualsevol acció que es pugui fer amb el ratolí es pugui fer també d'una altra manera, principalment amb el teclat, i que la navegació sigui previsible: focus visible, ordre lògic, temps suficient i objectius assolibles. Cinc pautes l'estructuren.

Tota la funcionalitat ha d'estar disponible des del teclat.

• 2.1.1 Teclat (A): cada funció es pot fer servir amb teclat (Tab, Enter, Espai, fletxes). Si el filtre de Cursalia només s'obre amb clic de ratolí, la Lucía queda fora.
• 2.1.2 Sense trampes de teclat (A): el focus ha de poder entrar i sortir de qualsevol component. Un modal de matrícula que atrapa el Tab a dins per sempre és una "trampa": la Lucía no en pot escapar.
• 2.1.4 Dreceres de tecla de caràcter (A): si hi ha dreceres d'una sola tecla (p. ex. "b" per cercar), s'han de poder desactivar, remapejar o exigir focus; si no, el control per veu d'un altre usuari les dispara sense voler.

La construcció real de widgets operables per teclat (menús, desplegables, modals) es detalla al Mòdul 5: Widgets JS / Teclat. Aquí fixem el requisit.

Donar als usuaris el temps necessari per llegir i fer servir el contingut.

• 2.2.1 Temps ajustable (A): si hi ha un límit de temps (una sessió que caduca, un qüestionari cronometrat), l'usuari l'ha de poder desactivar, ajustar o ampliar. En Hugo (TDAH) necessita més temps en un test.
• 2.2.2 Posar en pausa, aturar, amagar (A): tot contingut que es mogui, parpellegi o s'actualitzi sol (un carrusel de cursos destacats a la landing) s'ha de poder pausar. El moviment constant distreu en Hugo i dificulta la lectura a la Sofía.

• 2.3.1 Llindar de tres flaixos (A): res no ha de fer flaix més de tres vegades per segon (o mantenir-se sota els llindars segurs). Un bàner promocional de Cursalia amb parpelleig intens podria provocar una crisi a persones amb epilèpsia fotosensible.

Ajudar els usuaris a navegar, trobar contingut i saber on són.

• 2.4.1 Saltar blocs (A): oferir un enllaç de salt ("Salta al contingut") per no tabular per la capçalera i el menú a cada pàgina. La Lucía ho agraeix a cada càrrega.
• 2.4.2 Títol de pàgina (A): cada pàgina/vista té un <title> descriptiu. A la SPA, en canviar de vista cal actualitzar-lo.
• 2.4.3 Ordre del focus (A): l'ordre de tabulació segueix un flux lògic i coherent amb el significat.
• 2.4.4 Propòsit de l'enllaç (en context) (A): el text de l'enllaç ha de deixar clar el seu destí. Deu enllaços "Veure més" idèntics no serveixen; "Veure més sobre Accessibilitat Web" sí.
• 2.4.6 Encapçalaments i etiquetes (AA): encapçalaments i etiquetes descriptius. La Marta navega el panell de l'alumne saltant per encapçalaments; si diuen "Secció 1", no l'orienten.
• 2.4.7 Focus visible (AA): l'element amb focus ha de tenir un indicador visible. Treure l'outline sense substitut deixa la Lucía sense saber on és.
• 2.4.11 Focus no enfosquit (mínim) (AA) — nou a WCAG 2.2: l'element enfocat no ha de quedar totalment tapat per un altre contingut (una barra fixa, un bàner de cookies). Si el focus baixa darrere de l'encapçalament enganxós de Cursalia, la Lucía no el veu.

El disseny de l'indicador de focus i de la navegació per teclat en widgets s'implementa al Mòdul 5.

Facilitar l'ús amb dispositius diferents, més enllà del teclat (tàctil, punter, moviment).

• 2.5.1 Gestos del punter (A): tota acció que faci servir gestos multipunt o basats en trajectòria (lliscar el carrusel) ha de tenir també una alternativa d'un sol punter (botons anterior/següent).
• 2.5.2 Cancel·lació del punter (A): una acció no s'ha d'executar en el mousedown; s'ha de poder cancel·lar deixant anar fora. Evita activacions accidentals, útil per a tremolor motor.
• 2.5.3 Etiqueta en el nom (A): el nom accessible d'un control ha d'incloure el text visible. Si el botó diu "Matricular" però el seu nom per a la TA és "enviar-form", el control per veu que diu "prem Matricular" falla.
• 2.5.4 Actuació per moviment (A): si alguna cosa s'activa movent o sacsejant el dispositiu, ha d'existir alternativa per interfície i poder-se desactivar.
• 2.5.7 Moviments d'arrossegar (AA) — nou a 2.2: tota acció d'arrossegar (reordenar lliçons al panell) necessita una alternativa d'un sol clic. La Lucía no arrossega.
• 2.5.8 Mida de l'objectiu (mínim) (AA) — nou a 2.2: els objectius tàctils han de mesurar com a mínim 24×24 px (amb excepcions per espaiat). Botons diminuts del filtre són difícils d'encertar amb tremolor o al mòbil.

• Treure l'outline de focus "perquè és lleig". És la causa número u d'incomplir 2.4.7. Si no agrada l'estil per defecte, es redissenya, no s'elimina.
• Modals que atrapen el focus (2.1.2) o que el perden en tancar-se. El focus ha de poder sortir i tornar a un punt lògic.
• Capçaleres fixes que tapen l'element enfocat (2.4.11). Molt comú amb position: sticky; cal reservar espai o desplaçar el scroll.
• Confiar només en el title de l'enllaç o en el color per al seu propòsit. 2.4.4 exigeix que el text de l'enllaç s'entengui.
• Consell: fes la "prova del ratolí desendollat". Desa el ratolí i recorre una superfície completa de Cursalia només amb Tab, Shift+Tab, Enter, Espai i fletxes. Si et quedes encallat o perds el focus, tens una errada Operable.

Exercici 1. El filtre desplegable del catàleg s'obre i es tanca només amb clic; les seves opcions se seleccionen amb el ratolí. Enumera com a mínim dos criteris que probablement s'incompleixen i què exigeix cadascun.

Exercici 2. Al panell de l'alumne, les lliçons es reordenen arrossegant-les amb el ratolí. Quin criteri de WCAG 2.2 s'hi aplica i quina és l'alternativa mínima exigida per a la Lucía?

Exercici 3. El botó "Matricular" mostra aquest text, però el seu nom accessible (etiqueta interna) és "cta-1". Un usuari de control per veu diu "prem Matricular" i no passa res. Quin criteri falla i què exigeix?

Solució 1. Com a mínim: 2.1.1 Teclat (A) —tota la funcionalitat del filtre s'ha de poder operar amb teclat— i 2.4.7 Focus visible (AA) si en recórrer-lo no es veu on és el focus. També pot aparèixer 2.4.3 Ordre del focus (A) si en obrir-lo l'ordre de tabulació és incoherent. La correcció conceptual: el desplegable s'ha d'obrir, recórrer i activar amb teclat, amb focus visible (implementació al Mòdul 5).

Solució 2. S'hi aplica 2.5.7 Moviments d'arrossegar (AA), nou a WCAG 2.2. Exigeix oferir una alternativa que no requereixi arrossegar, per exemple botons "pujar/baixar" o un menú amb posicions, activables amb un sol clic o amb teclat.

Solució 3. Falla 2.5.3 Etiqueta en el nom (A): el nom accessible del control ha de contenir el text visible ("Matricular"). Així, quan l'usuari de veu anomena allò que veu, la TA el troba. (El nom accessible s'implementa al Mòdul 4.)

El principi Operable exigeix que la interfície completa es pugui manejar sense ratolí: teclat sense trampes, temps suficient, absència de flaixos perillosos, navegació amb focus visible i ordenat, i objectius d'entrada assolibles per punter, gest o moviment. WCAG 2.2 reforça això amb criteris nous (2.4.11, 2.5.7, 2.5.8) molt enganxats a l'ús real de la Lucía. Ja podem percebre i operar; falta que la persona entengui què està passant: que l'idioma estigui declarat, que la interfície sigui predictible i que els errors del formulari de matrícula s'expliquin i es puguin corregir. Això és el principi Comprensible, que abordem a la lliçó 03-03.