Lliçó 5 de 10 · 12 min de lectura · Revisada el 26/10/2026
Teclat, temps, moviment i flaixos: 2.1.x, 2.2.x i 2.3.x
Estàs llegint una lliçó oberta. Matricula't per fer els tests i els exercicis, desar el teu progrés i aconseguir el certificat.
Matricula-m'hi · nivell 4 (49 €)El principi Operable comença amb la condició més bàsica de totes: que la interfície es pugui fer servir sense ratolí, sense pressa i sense que res a la pantalla faci mal. Les pautes 2.1 (accessible per teclat), 2.2 (temps suficient) i 2.3 (convulsions i reaccions físiques) contenen diversos criteris de nivell A l'incompliment dels quals bloqueja completament grups sencers de persones. Aquesta lliçó detalla com avaluar-los i quines excepcions hi ha.
2.1.1 Teclat (A)
Tota la funcionalitat ha de ser operable mitjançant una interfície de teclat sense requerir temps específics per a cada pulsació, tret que la funció depengui intrínsecament de la trajectòria del moviment de l'usuari i no només dels seus punts finals (dibuix a mà alçada). Un mapa que s'arrossega no està exempt: l'arrossegament té punts finals equivalents (botons de desplaçament, zoom).
Avaluació: llista de totes les funcions de la pàgina (obrir, tancar, seleccionar, ordenar, filtrar, arrossegar, reproduir, tancar avisos) i verificació de cadascuna amb teclat. Comprova els components personalitzats amb els patrons de l'APG (s'obre en una finestra nova): pestanyes amb fletxes, menús amb fletxes i Escapada, combos amb fletxes i Retorn, controls lliscants amb fletxes, Inici i Fi. Fallades: div i span amb onclick sense tabindex ni gestió de tecles; icones de tancament només amb ratolí; esdeveniments només mouseover; mapes i carrusels sense controls; arrossegar i deixar anar sense alternativa (que a més incompleix el 2.5.7).
2.1.2 Sense paranys per al focus del teclat (A)
Si el focus pot entrar en un component amb el teclat, n'ha de poder sortir amb el teclat; si no són les tecles estàndard (Tab, fletxes, Escapada), cal informar del mètode. És un criteri de no interferència. Fallades: modals que atrapen el focus i no es tanquen amb Escapada ni ofereixen un botó accessible; reproductors i iframes de tercers dels quals no es pot sortir; ginys que capturen el Tab. Nota: un modal que atrapa el focus deliberadament no és un parany si Escapada o un botó de tancament retornen el focus a la pàgina.
2.1.4 Dreceres de teclat (A)
Si hi ha una drecera que faci servir només lletres, números, signes de puntuació o símbols (sense modificador), s'ha de complir almenys una de tres condicions: es pot desactivar, es pot reassignar perquè inclogui un modificador, o només està activa quan el component corresponent té el focus. Afecta les persones que fan servir control per veu (una paraula dictada dispara diverses dreceres) i les que premen tecles per error. Avaluació: busca documentació de dreceres i prem lletres soltes amb el focus al cos de la pàgina; si passa alguna cosa (s'obre el cercador amb «/», es marca com a llegit amb «e»), verifica que hi hagi desactivació o reassignació.
Exemple
<!-- Incorrecte: component de pestanyes sense suport de teclat -->
<div class="tab" onclick="mostrar(1)">Dades</div>
<!-- Correcte (resum del patró APG) -->
<div role="tablist" aria-label="Seccions de l'expedient">
<button role="tab" id="t1" aria-selected="true" aria-controls="p1">Dades</button>
<button role="tab" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">Documents</button>
</div>
<div role="tabpanel" id="p1" aria-labelledby="t1">…</div>
<!-- JavaScript: les fletxes esquerra/dreta canvien de pestanya, Inici/Fi a la primera/última -->2.2.1 Temps ajustable (A)
Per a cada límit de temps establert pel contingut, s'ha de complir una d'aquestes condicions: l'usuari el pot desactivar abans de trobar-lo; el pot ajustar abans de trobar-lo en un rang d'almenys deu vegades el valor per defecte; o se l'avisa abans que expiri, amb almenys 20 segons per ampliar-lo mitjançant una acció simple (prémer una tecla), i el pot ampliar almenys deu vegades. Excepcions: el límit forma part d'un esdeveniment en temps real (subhasta), és essencial i ampliar-lo invalidaria l'activitat, o supera les 20 hores.
On apareix: tancaments de sessió en seus electròniques i banca, formularis amb caducitat, reserves amb compte enrere, carrusels (que es tracten al 2.2.2), missatges que desapareixen sols (toasts). Avaluació: localitza cada límit preguntant al client i observant; comprova si hi ha avís, quant temps dona i com s'amplia; verifica que l'avís sigui accessible (anunciat pel lector, operable amb teclat). Una sessió de 20 minuts que expira sense avís i perd les dades del formulari és una fallada del 2.2.1 de severitat alta.
2.2.2 Posar en pausa, aturar, amagar (A)
Per a la informació que es mou, parpelleja o es desplaça i que comença automàticament, dura més de cinc segons i es presenta en paral·lel amb un altre contingut, hi ha d'haver un mecanisme per posar-la en pausa, aturar-la o amagar-la, tret que el moviment sigui essencial. Per a la informació que s'actualitza automàticament (cotitzacions, titulars), s'ha de poder posar en pausa, aturar, amagar o controlar-ne la freqüència. És un criteri de no interferència.
Fallades típiques: carrusels automàtics sense botó de pausa (el més repetit en portades institucionals); vídeos de fons a les capçaleres; rètols de notícies en moviment; animacions decoratives en bucle; GIF animats llargs. El botó de pausa ha de ser accessible amb teclat i tenir nom i estat. Un carrusel que s'atura en passar el punter no compleix: cal un control explícit.
2.3.1 Llindar de tres flaixos o menys (A)
Les pàgines no han de contenir res que faci flaixos més de tres vegades per segon, o el flaix ha d'estar per sota dels llindars de flaix general i de flaix vermell (que depenen de l'àrea i del contrast del canvi). És un criteri de no interferència. Avaluació: identifica vídeos, GIF i animacions amb canvis bruscos de lluminositat; per als casos dubtosos hi ha l'eina PEAT (Photosensitive Epilepsy Analysis Tool, del Trace Center), que analitza vídeos. Per a l'auditor, qualsevol contingut amb flaixos ràpids repetits és sospitós i s'ha de documentar; el compliment estricte es demostra amb una anàlisi.
2.3.3 Animació a partir d'interaccions (AAA)
Encara que és AAA, convé conèixer-lo: les animacions de moviment disparades per la interacció (paral·laxi, zooms en fer scroll) s'han de poder desactivar tret que siguin essencials. La consulta de mitjans prefers-reduced-motion és la tècnica habitual, i respectar-la és una recomanació raonable fins i tot en auditories AA.
Punt clau
Quatre criteris d'aquestes pautes (1.4.2, 2.1.2, 2.2.2 i 2.3.1) són de no interferència: s'han de complir a tota la pàgina, inclòs el contingut de tercers, perquè qualsevol altra part es pugui declarar conforme. Un carrusel d'un proveïdor extern sense pausa invalida la conformitat de tota la portada.
Severitat i redacció de la troballa
Les fallades del 2.1.1 i el 2.1.2 en passos d'un procés solen ser de severitat màxima, perquè normalment impedeixen la tasca. Les del 2.2.1 ho són quan l'expiració perd dades o tanca la sessió sense avís. Les del 2.2.2 són de severitat mitjana-alta pel seu impacte en persones amb dèficit d'atenció o amb lector de pantalla (el carrusel canvia el contingut mentre el llegeixen), i les del 2.3.1 són crítiques pel risc per a la salut. En la redacció, indica sempre quina funció no es pot dur a terme i amb quina entrada («no és possible tancar l'avís de galetes amb el teclat; el focus queda atrapat a l'iframe de l'avís»).
Error freqüent
Donar per complert el 2.2.2 perquè el carrusel «s'atura en passar-hi el ratolí per sobre». Les persones que naveguen amb teclat o lector no passen el ratolí. El criteri exigeix un mecanisme explícit (botó de pausa) o que el carrusel no sigui automàtic.
Prova-ho tu
Sense tocar el ratolí, recorre amb Tab i Maj + Tab la portada d'una seu electrònica. Obre cada menú o avís i prem Escapada. Amb el focus al cos de la pàgina, prem lletres soltes com s o / i observa si passa alguna cosa. Si hi ha un carrusel automàtic, busca'n el botó de pausa i comprova que hi arribes amb el teclat.
Resum
- 2.1.1: tota funció operable amb teclat; patrons de l'APG per a components personalitzats; excepció només per a trajectòries essencials.
- 2.1.2: el focus sempre pot sortir; modals amb Escapada i retorn del focus. 2.1.4: dreceres d'un caràcter desactivables, reassignables o només amb focus.
- 2.2.1: límits de temps desactivables, ajustables (×10) o ampliables amb avís de 20 s; excepcions de temps real, essencial i > 20 hores.
- 2.2.2: moviment automàtic > 5 s i actualitzacions automàtiques amb pausa, aturada o ocultació explícites.
- 2.3.1: res no fa flaixos més de tres vegades per segon per sobre dels llindars; 1.4.2, 2.1.2, 2.2.2 i 2.3.1 són criteris de no interferència.
Portes 5 lliçons d'aquest curs: que no es perdin
Crea el teu compte i desa el que ja has llegit i segueix el curs amb tot:
- El test d'aquesta lliçó (3 preguntes) per comprovar el que has après
- Exercicis pràctics amb pàgines reals
- El teu progrés desat: continues on ho vas deixar, des de qualsevol dispositiu
- Constància del curs amb les hores i certificat del nivell 4 quan aprovis l'examen
Entres amb el teu compte de Google o només amb el teu correu electrònic. No cal contrasenya.
Matricula-m'hi · nivell 4 (49 €)