Què canvia a WCAG 2.2: nou criteris nous i un de retirat

WCAG 2.2 es va publicar com a Recomanació del W3C l'octubre de 2023. Com vas veure a la lliçó «Què són les WCAG i qui les elabora», afegeix nou criteris i en retira un, el 4.1.1 Processament. En aquesta lliçó els recorrem un per un amb el que ja saps: què demana cada criteri, quines excepcions té, a qui beneficia i un exemple de com es compleix o s'incompleix. Són els que més s'obliden en webs que «ja complien la 2.1».

Per què una versió 2.2

WCAG 2.1 havia reforçat el mòbil i la baixa visió, però quedaven buits en tres grups: persones amb discapacitat cognitiva o de l'aprenentatge, persones amb baixa visió que naveguen amb teclat i persones amb limitacions motrius que fan servir amb dificultat la pantalla tàctil o el ratolí. Els nou criteris nous s'hi concentren. Sis són de nivell A o AA i entren, per tant, en la conformitat que exigeix la llei quan es pren WCAG 2.2 com a referència.

El focus: que es vegi i que no es tapi

2.4.11 Focus no ocult (mínim) (AA): quan un component rep el focus del teclat, no queda totalment ocult per contingut creat per l'autor. El cas típic és la capçalera fixa (sticky header, la que es queda enganxada a dalt en desplaçar-se) o el bàner de galetes: en tabular cap avall, l'enllaç amb el focus queda a sota i la persona no sap on és. N'hi ha prou que se'n vegi una part per complir el nivell AA. Si el contingut que el tapa l'ha obert el mateix usuari i el pot apartar sense moure el focus (per exemple, tancant-lo amb Esc), no es considera error.

2.4.12 Focus no ocult (millorat) (AAA) apuja el llistó: cap part del component amb el focus no pot quedar oculta. 2.4.13 Aparença del focus (AAA) fixa per primera vegada com ha de ser l'indicador: una àrea almenys equivalent a un perímetre de 2 píxels CSS al voltant del component i un contrast d'almenys 3:1 entre l'estat amb focus i sense focus.

/* Reserva espai per a la capçalera fixa en desplaçar el focus (ajuda al 2.4.11) */
html { scroll-padding-top: 5rem; }

/* Indicador visible i gruixut (2.4.7; s'acosta al 2.4.13) */
:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }

El punter: arrossegar i encertar

2.5.7 Moviments d'arrossegament (AA): tota funció que es maneja arrossegant s'ha de poder fer també amb un sol punter sense arrossegar, llevat que l'arrossegament sigui essencial o el controli el navegador sense modificació de l'autor. Exemples: un tauler de tasques en què les targetes es mouen arrossegant ha d'oferir també un menú «Mou a…»; un control lliscant de preu ha d'acceptar clics a la barra o botons de més i menys; un mapa ha de tenir botons per desplaçar-se. No tracta del teclat (això ja ho exigeix el 2.1.1), sinó de qui fa servir ratolí, pantalla tàctil o un punter amb el cap i no pot mantenir premut mentre es mou.

2.5.8 Mida de l'objectiu (mínim) (AA): els objectius del punter fan almenys 24 per 24 píxels CSS. És un criteri amb cinc excepcions, i conèixer-les evita molts falsos positius:

• Espaiat: un objectiu més petit compleix si, en dibuixar un cercle de 24 píxels centrat en ell, no toca cap altre objectiu ni el cercle d'un altre objectiu petit.
• Equivalent: la mateixa funció està disponible en un altre control de la mateixa pàgina que sí que compleix.
• En línia: l'objectiu és dins d'una frase o la seva mida la limita l'interlineat del text, com un enllaç en un paràgraf.
• Control de l'agent d'usuari: la mida la decideix el navegador i l'autor no l'ha modificada.
• Essencial: una presentació concreta és essencial o l'exigeix la llei.

No confonguis aquest criteri amb el 2.5.5 Mida de l'objectiu (millorat), de nivell AAA, que demana 44 per 44 píxels CSS i existeix des de WCAG 2.1.

Ajuda i formularis: no fer pensar dues vegades

3.2.6 Ajuda coherent (A): si una pàgina ofereix algun mecanisme d'ajuda (dades de contacte d'una persona, un mitjà de contacte com un xat o un formulari, una opció d'autoajuda com les preguntes freqüents, o un assistent automàtic) i aquest mecanisme es repeteix en diverses pàgines del conjunt, ha d'aparèixer en el mateix ordre relatiu respecte a la resta del contingut. No obliga a oferir ajuda; obliga que, si n'hi ha, sigui sempre al mateix lloc.

3.3.7 Entrada redundant (A): la informació que la persona ja ha introduït, o que se li ha proporcionat, i que torna a ser necessària en el mateix procés, s'emplena automàticament o es pot seleccionar. Exemple clàssic: en una compra, la casella «L'adreça de facturació és la mateixa que la d'enviament». Hi ha tres excepcions: que tornar-la a escriure sigui essencial (un joc de memòria), que sigui necessari per seguretat (confirmar una contrasenya nova) o que la informació anterior ja no sigui vàlida.

Autenticació: iniciar la sessió sense proves de memòria

3.3.8 Autenticació accessible (mínim) (AA): cap pas d'un procés d'autenticació no pot exigir una prova de funció cognitiva (recordar, transcriure o manipular informació, com ara memoritzar una contrasenya o resoldre un endevinall) llevat que s'ofereixi almenys una d'aquestes opcions: un altre mètode d'accés que no l'exigeixi; un mecanisme que ajudi a superar-la, com permetre que el gestor de contrasenyes empleni el camp o que s'hi pugui enganxar; una prova de reconèixer objectes; o una prova d'identificar contingut que la mateixa persona ha aportat al lloc.

<!-- Incorrecte: bloquejar l'enganxat impedeix fer servir gestors de contrasenyes (3.3.8) -->
<input type="password" id="clave" onpaste="return false">

<!-- Correcte: permet enganxar i emplenar automàticament -->
<label for="clave">Contrasenya</label>
<input type="password" id="clave" autocomplete="current-password">

3.3.9 Autenticació accessible (millorada) (AAA) elimina les excepcions de reconèixer objectes i de contingut personal: en AAA, ni tan sols un CAPTCHA de «selecciona els semàfors» és acceptable sense alternativa.

El que surt: 4.1.1 Processament

El 4.1.1 exigia HTML ben format: etiquetes tancades, sense atributs duplicats, identificadors únics. A WCAG 2.2 figura com a obsolet i retirat: els navegadors actuals reparen aquests errors de manera uniforme, i els problemes reals que causaven (un id duplicat que trenca l'associació d'una etiqueta) ja són errors de l'1.3.1 o del 4.1.2. El W3C va afegir, a més, una nota a WCAG 2.0 i 2.1 que indica que, per al contingut HTML o XML, el 4.1.1 s'ha de considerar sempre complert.

I la llei?

L'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova), la norma harmonitzada vigent, remet a WCAG 2.1, així que els criteris nous de la 2.2 encara no hi figuren com a requisit. Però treballar amb WCAG 2.2 AA garanteix complir la 2.1, millora el servei a persones reals i prepara per a la nova versió de la norma europea: l'EN 301 549 v4.1.1 (PDF, s'obre en una finestra nova), publicada per l'ETSI el setembre de 2026, incorpora WCAG 2.2 i està pendent de citar-se al Diari Oficial de la UE; fins aleshores, la referència harmonitzada continua sent la v3.2.1. Ho veuràs al curs N1-C4 «Marc legal essencial».

Resum

• WCAG 2.2 afegeix nou criteris (sis A o AA, tres AAA) i retira el 4.1.1 Processament.
• Focus: 2.4.11 (no totalment tapat, AA); 2.4.12 i 2.4.13 en AAA.
• Punter: 2.5.7 (alternativa a l'arrossegament) i 2.5.8 (24 per 24 píxels CSS, amb cinc excepcions).
• Formularis i ajuda: 3.2.6 (ajuda al mateix lloc), 3.3.7 (no repetir dades) i 3.3.8 (accés sense proves de memòria ni bloqueig de l'enganxat).
• L'EN 301 549 v3.2.1 remet a WCAG 2.1, però complir la 2.2 cobreix aquest requisit i s'anticipa a la seva revisió.