Els criteris WCAG 2.2 AA explicats sense tecnicismes

Els criteris WCAG 2.2 AA són els requisits tècnics concrets que una web ha de complir per ser considerada accessible a nivell AA, el nivell mínim exigit per llei. En total n’hi ha més de cinquanta, però no cal conèixer-los tots per entendre el que importen.

En aquest article t’expliquem els més rellevants, agrupats per àrea temàtica i amb exemples pràctics. L’objectiu no és fer-te expert en WCAG, sinó que puguis entendre de què parlem quan fem una auditoria i per què certs problemes són prioritaris.

Colors i contrast

El contrast és un dels errors més habituals i dels més fàcils de detectar. El criteri és clar: el text ha de tenir prou diferència de luminositat respecte al fons per ser llegible per a persones amb baixa visió o daltonisme.
Què exigeix el nivell AA:

• Text normal (fins a 18px regular o 14px en negreta): contrast mínim de 4,5:1
• Text gran (18px o més en regular, o 14px o més en negreta): contrast mínim de 3:1
• Elements d’interfície i gràfics informatius: contrast mínim de 3:1

Exemple pràctic:
Text gris clar sobre fons blanc és un error molt comú en webs modernes que prioritzen l’estètica minimalista. Visualment pot semblar elegant, però per a una persona amb baixa visió pot ser completament il·legible.

Una cosa que molts no saben:
El contrast no afecta només el text. Els botons, els camps de formulari, les icones informatives i els gràfics també han de complir els requisits de contrast. Un botó amb text blanc sobre fons taronja clar, per exemple, pot no superar el mínim.

Imatges i contingut visual

Les imatges no les poden veure els usuaris de lectors de pantalla ni els motors de cerca. Per això, qualsevol imatge que aporti informació ha de tenir un text alternatiu, l’atribut ALT, que descrigui el seu contingut.

Què exigeix el nivell AA:

• Totes les imatges informatives han de tenir un atribut ALT descriptiu
• Les imatges decoratives han de tenir un ALT buit (alt=””) perquè el lector de pantalla les ignori
• Els gràfics i infografies complexes necessiten una descripció extensa accessible

Exemple pràctic:
Una foto d’un hotel amb la descripció alt=”hotel” és insuficient. Un text com alt=”Habitació doble amb vistes al mar de l’Hotel Exemple, amb llit de matrimoni i terrassa” és el que realment ajuda l’usuari a entendre el contingut.

Un error subtil molt comú:
Posar el nom del fitxer com a ALT, com ara alt=”IMG_20240315_foto_hotel.jpg”, és pitjor que no posar res. El lector de pantalla llegirà tota aquella cadena de text sense sentit.

Formularis

Els formularis són un dels punts crítics en webs turístiques, de serveis i de comerç electrònic. Un formulari inaccessible pot impedir que un usuari completi una reserva, un pressupost o una compra.

Què exigeix el nivell AA:

• Cada camp de formulari ha de tenir una etiqueta visible i associada correctament al camp
• Els errors han d’identificar quin camp té el problema i explicar com corregir-lo
• Els camps obligatoris han d’estar clarament indicats
• Si hi ha un límit de temps per completar el formulari, l’usuari ha de poder ampliar-lo

Exemple pràctic:
Un formulari de reserves que només usa el placeholder com a etiqueta, el text gris que desapareix quan comences a escriure, sembla net visualment però és inaccessible. Quan l’usuari comença a omplir el camp, perd la referència de quin camp és. Un lector de pantalla directament no pot identificar el camp.

L’error d’errors:
Mostrar un missatge genèric com “Hi ha errors al formulari” sense especificar quins camps fallen és un error WCAG. El missatge ha d’indicar exactament quin camp té el problema i com solucionar-lo: “El camp Email no és vàlid. Introdueix una adreça de correu electrònic correcta.”

Navegació i estructura

Una web accessible ha de poder usar-se sense ratolí. Això és fonamental per a persones amb mobilitat reduïda, que naveguen amb teclat o amb dispositius alternatius.

Què exigeix el nivell AA:

• Tots els elements interactius han de ser accessibles per teclat (tecla Tab per navegar, Enter per activar)
• L’element que té el focus ha de ser visible — l’usuari ha de saber en tot moment on és
• La pàgina ha de tenir un mecanisme per saltar el menú de navegació i anar directament al contingut principal (els “skip links”)
• Els títols (H1, H2, H3…) han de seguir una jerarquia lògica i coherent
• El títol de cada pàgina ha de ser descriptiu i únic

Exemple pràctic:
Prova de navegar la teva web només amb la tecla Tab. Si en algun moment perds de vista on ets — perquè el focus no és visible — o si no pots accedir a algun element, tens un problema d’accessibilitat. Molts temes de WordPress desactiven l’outline de focus per raons estètiques, i això és un error WCAG directe.

La jerarquia de títols:
És molt habitual trobar webs on el primer títol és un H2 perquè “queda millor visualment”, o on hi ha salts de H1 a H4 sense passar per H2 i H3. Per a un lector de pantalla, els títols són el mapa de navegació de la pàgina. Una jerarquia trencada és com un índex desordenat.

Texts i llegibilitat

L’accessibilitat no és només per a persones amb discapacitats visuals o motores. Les persones amb dislèxia, amb dificultats cognitives o simplement amb poca familiaritat digital també es beneficien d’una web ben estructurada.

Què exigeix el nivell AA:

• L’idioma de la pàgina ha d’estar definit al codi HTML
• Si hi ha canvis d’idioma dins del contingut, cal indicar-los
• El text no ha de ser imatge: el text real és accessible, el text dins d’una imatge no
• L’espaiat entre línies, paràgrafs i lletres ha de poder ser ajustat per l’usuari sense perdre contingut ni funcionalitat

Un criteri nou a la versió 2.2:
Les WCAG 2.2 van introduir el criteri “Focus Appearance”, el focus visible no només ha d’existir, sinó que ha de tenir unes dimensions mínimes i un contrast suficient per ser realment útil. Molts temes i plugins que van ser “accessibles” amb WCAG 2.1 han hagut d’actualitzar-se per complir aquest criteri nou.

Els errors més habituals que trobem

Després d’auditar webs de tot tipus a Catalunya, aquests són els problemes que apareixen amb més freqüència:

• Contrast insuficient, especialment en texts de color gris sobre blanc i en botons
• Imatges sense ALT o amb ALT genèric o buit quan no hauria de ser-ho
• Formularis sense etiquetes associades correctament als camps
• Focus invisible, l’outline de focus desactivat per CSS
• Jerarquia de títols trencada, salts de nivell o ús de títols per raons estètiques
• Errors de formulari genèrics sense indicar quin camp falla ni com corregir-lo
• Menús mòbils inaccessibles per teclat o sense atributs ARIA correctes

Cap d’aquests errors requereix un redisseny. Tots es corregeixen amb ajustos tècnics concrets — que és exactament el que fem en una auditoria i implementació.

Com saber si la teva web els compleix

Hi ha eines automàtiques que detecten una part dels problemes, WAVE i Lighthouse són les més conegudes. Però les eines automàtiques només detecten aproximadament el 30-40% dels errors reals. Els problemes de navegació per teclat, la qualitat dels textos alternatius o la comprensibilitat dels errors de formulari requereixen revisió manual.

La manera més fiable de saber on estàs és una auditoria professional que combini anàlisi automàtica i revisió manual. Però si vols una primera aproximació ràpida, la nostra eina d’autoavaluació et dona una puntuació inicial en minuts.

Vols saber com està la teva web? [Analitza-la gratis →] o [Demana una auditoria professional →]