Com fer la teva web accessible: una guia inicial de WCAG 2.2
Per fer una web accessible, construeix-la perquè la gent la pugui usar amb el teclat, un lector de pantalla, el zoom o un dispositiu de commutador, a més del ratolí: usa elements HTML reals per als botons, els enllaços, els encapçalaments i les etiquetes dels formularis; dona a les imatges un text alternatiu significatiu; mantén un contrast alt del text i fes visible el focus. L'estàndard a aconseguir és WCAG 2.2 nivell AA. Les eines automàtiques detecten una part del problema; una prova de deu minuts amb teclat i lector de pantalla en detecta gran part de la resta.
Què vol dir «accessible» a la pràctica
L'accessibilitat va de persones: algú que és cec i usa un lector de pantalla, algú amb tremolor que navega amb el teclat, algú amb visió reduïda que fa zoom al 200%, algú que llegeix a ple sol, algú amb un braç trencat temporalment. Una bona accessibilitat sol millorar la web per a tothom: estructura més clara, text llegible, formularis que expliquen els seus errors.
La referència és les Directrius d'accessibilitat del contingut web (WCAG) del W3C. A partir de setembre de 2026, la versió vigent és WCAG 2.2 (publicada l'octubre de 2023, actualitzada el desembre de 2024); WCAG 3 és un esborrany inicial. WCAG s'organitza al voltant de quatre principis —el contingut ha de ser perceptible, operable, comprensible i robust— i té tres nivells de conformitat:
| Nivell | Què vol dir | Qui hi apunta |
|---|---|---|
| A | El mínim; sense ell, algunes persones no poden usar el lloc de cap manera | Tothom |
| AA | L'objectiu comú; cobreix el contrast, el focus, la redimensió i la gestió d'errors | La majoria d'organitzacions i moltes lleis |
| AAA | El més estricte; no és assolible per a tot el contingut | Serveis i públics específics |
Algunes lleis de diversos països fan referència a WCAG —per exemple, l'Acta europea d'accessibilitat, que s'aplica a molts serveis digitals de consum a la UE des del juny de 2025. Quines normes t'afecten depèn d'on operes i què véns; consulta un assessor si tens dubtes. Aquesta guia cobreix la feina pràctica.
Opcions: com arribar-hi
| Enfocament | Adequat per a | Compromís |
|---|---|---|
| Construir-la des del principi | Webs i apps noves | Menys esforç en conjunt; cal decidir-ho des d'un inici |
| Auditar i arreglar | Webs existents | Troba problemes reals; requereix una revisió concentrada per pàgina |
| Auditoria professional | Sectors regulats, webs grans, organismes públics | Exhaustiva i documentada; costa diners |
| Complement de superposició | No recomanat | No pot arreglar el codi de fons |
Per a la majoria de webs petites, els dos primers són suficients: digues a la IA que construeixi de manera accessible des del principi, i després audita abans de llançar.
Les correccions que més importen
Usa els elements HTML adequats
La major part de l'accessibilitat arriba gratis amb un HTML correcte. Un <button> és enfocable, funciona amb Intro i Espai, i s'anuncia com a botó. Un <div> amb un gestor de clic no fa cap d'aquestes coses. El codi generat per la IA a vegades usa div d'estil per a tot; demana elements semàntics:
<button>per a accions,<a href>per a la navegació- Un sol
<h1>per pàgina, després<h2>i<h3>en ordre; les persones que usen lectors de pantalla salten entre encapçalaments - Punts de referència:
<header>,<nav>,<main>,<footer> - Un
<label>connectat a cada camp de formulari - L'idioma de la pàgina a
<html lang="ca">
Usa atributs ARIA només quan cap element natiu encaixi —per a un conjunt de pestanyes personalitzat o un combobox, per exemple. Un ARIA mal usat és pitjor que no tenir-ne.
Accés amb teclat i focus visible
Tot el que pots fer amb el ratolí ha de funcionar només amb el teclat (WCAG 2.1.1). Prem Tab per la pàgina: cada enllaç, botó i camp hauria de ser accessible en un ordre lògic, i sempre has de veure on és el focus (2.4.7 Focus visible). WCAG 2.2 afegeix que l'element enfocat no ha d'estar completament ocult darrere de capçaleres fixes o banners de galetes (2.4.11, nivell AA).
Errors habituals: menús que només s'obren en passar el ratolí, finestres modals que no atrapen el focus o no es poden tancar amb Escape, i outline: none al CSS sense res que el substitueixi.
Alternatives de text
Cada imatge significativa necessita un text alternatiu que digui què mostra en context («Un xef presentant el menú de degustació», no «imatge1.jpg»). Les imatges decoratives reben un alt="" buit perquè els lectors de pantalla les saltin. Els botons només amb icona necessiten un nom accessible («Tancar», «Cercar»). Els vídeos necessiten subtítols; l'àudio, una transcripció.
Color i contrast
WCAG 2.2 AA exigeix una relació de contrast d'almenys 4,5:1 per al text normal i 3:1 per al text gran (1.4.3), i 3:1 per a les parts de la interfície com els marges dels camps i les icones significatives (1.4.11). Els errors habituals són el text de marcador gris clar i els botons pàl·lids. A més, mai no facis que només el color transmeti significat: una vora vermella en un camp no vàlid també necessita un missatge d'error.
Redimensió i reflux
El text ha de seguir sent utilitzable quan s'amplia al 200% (1.4.4), i el contingut ha de funcionar amb una amplada de 320 píxels CSS sense desplaçament lateral (1.4.10). Un disseny adaptable resol la majoria d'aquests casos.
Objectius, formularis i errors
- Mida de l'objectiu: WCAG 2.2 AA demana objectius de punter d'almenys 24 per 24 píxels CSS, o prou espai al voltant dels més petits (2.5.8). Més gran és més amable en els telèfons.
- Formularis: etiquetes visibles (no només el marcador de posició), instruccions clares i missatges d'error que digui què està malament i com arreglar-ho, al costat del camp.
- Inici de sessió: no obliguis la gent a resoldre un trencaclosques ni a transcriure un codi sense una alternativa; permet els gestors de contrasenyes i la pega (3.3.8 Autenticació accessible).
Indicacions que funcionen
Construeix aquest lloc perquè compleixi WCAG 2.2 nivell AA: punts de referència HTML semàntics, un sol h1 per pàgina amb encapçalaments en ordre, elements button i link reals, etiquetes en cada camp de formulari, estils de focus visibles, un contrast de text d'almenys 4,5:1, text alternatiu a les imatges significatives i alt="" a les decoratives, i html lang definit.
Audita les pàgines /signup i /checkout per accessibilitat. Comprova l'ús només amb teclat, l'ordre de focus, el focus visible, les etiquetes, els missatges d'error, el contrast i els noms dels botons d'icona per al lector de pantalla. Enumera cada problema amb el criteri WCAG, després arregla'ls sense canviar més del necessari el disseny visual.
El menú mòbil no es pot usar amb teclat. Fes-lo un botó amb aria-expanded, mou el focus dins del menú quan s'obri, tanca'l amb Escape i torna el focus al botó.
Pas a pas
- Fes una comprovació automàtica. La secció d'Accessibilitat de Lighthouse a les eines de desenvolupador de Chrome, o l'extensió axe, a cada pàgina principal. Arregla tot el que informi.
- Desconnecta el ratolí. Prem Tab per cada pàgina i completa cada tasca clau —registrar-se, cercar, pagar—. Anota qualsevol cosa a la qual no pots arribar, on no veus el focus o de la qual no pots sortir.
- Amplia al 200% i redueix la finestra a l'amplada d'un telèfon. No hauria d'haver-hi res tallat ni que calgui desplaçar-se lateralment.
- Prova un lector de pantalla durant deu minuts: VoiceOver al Mac i a l'iPhone, TalkBack a Android o NVDA a Windows (gratuït). Escolta els encapçalaments, els enllaços i els camps de formulari. «Botó» sense nom, o «enllaç, fes clic aquí», signifiquen feina pendent.
- Comprova el contrast del text, els botons i els camps amb un comprovador de contrast.
- Arregla i torna a provar les mateixes tasques.
- Publica una declaració d'accessibilitat que digui quin estàndard vols complir i com reportar problemes —i respon aquests informes.
Errors habituals
- Confiar en un complement de superposició en lloc d'arreglar el codi.
- Eliminar els contorns de focus perquè es veuen poc polits, sense cap substitut.
- El text de marcador com a única etiqueta. Desapareix quan algú comença a escriure i sovint té un contrast baix.
- Enllaços «Fes clic aquí» i «Llegeix més». Fora de context, els usuaris de lectors de pantalla senten una llista d'enllaços idèntics.
- Text alternatiu farcit de paraules clau. El text alternatiu és per a les persones; descriu la imatge.
- Provar només una vegada. Cada funció nova pot trencar l'accés amb teclat. Afegeix una passada amb teclat a la teva prova prèvia al llançament.
Llista de comprovació d'accessibilitat
- La comprovació automàtica (Lighthouse o axe) està neta a les pàgines principals
- Cada tasca es pot completar només amb el teclat
- El focus sempre és visible i mai no queda amagat darrere d'elements fixos
- Encapçalaments, punts de referència, botons i enllaços semàntics;
langdefinit - Text alternatiu significatiu; imatges decoratives amb
alt=""; subtítols als vídeos - Contrast del text ≥ 4,5:1 (text gran ≥ 3:1); parts de la interfície ≥ 3:1
- Funciona al zoom del 200% i amb una amplada de 320 px
- Cada camp de formulari té una etiqueta visible i missatges d'error clars
- Declaració d'accessibilitat amb una manera de reportar problemes
Per als conceptes que hi ha darrere, llegeix què és l'accessibilitat web. El disseny accessible i el bon disseny es solapen molt; com dissenyar una app atractiva amb IA cobreix el costat visual.
Accessibilitat a Mythex
Mythex construeix amb l'estàndard que li demanis, així que posa «WCAG 2.2 AA» a la teva primera indicació i en els seguiments. Pots usar el marc de mida de telèfon de la Vista prèvia per revisar les pantalles petites (Vista prèvia i codi), però les proves de teclat, de zoom i de lector de pantalla funcionen millor a la URL publicada o a una vista prèvia oberta en una pestanya pròpia. Demana a l'agent que auditi una pàgina, que arregli el que trobi i després prova tu mateix les correccions: una passada automàtica és un començament, no una aprovació definitiva.
Preguntes
Quin és l'estàndard d'accessibilitat actual per a les webs?
A partir de setembre de 2026, l'estàndard vigent del W3C és WCAG 2.2, publicat per primera vegada l'octubre de 2023. La majoria d'organitzacions i moltes lleis apunten al nivell AA. WCAG 3 encara és un esborrany inicial.
Un complement d'accessibilitat pot fer que la meva web compleixi la normativa?
No hi confiïs. Els complements afegeixen una barra d'eines sobre la pàgina però no poden arreglar les etiquetes que falten, l'accés amb teclat trencat o una mala estructura del codi de sota. Arreglar el lloc en si és el que el fa utilitzable.
Les eines de comprovació automàtica troben tots els problemes?
No. Eines com Lighthouse i axe detecten coses com la manca de text alternatiu, el contrast baix i els camps sense etiqueta, però molts problemes —un ordre de focus confús, textos d'enllaç sense sentit, un text alternatiu present però incorrecte— necessiten una persona que ho comprovi amb el teclat i un lector de pantalla.
Quina relació de contrast exigeix WCAG?
WCAG 2.2 nivell AA demana com a mínim 4,5:1 per al text normal i 3:1 per al text gran, i 3:1 per als components de la interfície d'usuari, com els marges dels camps d'entrada i les icones que transmeten significat.