Cas pràctic, exercicis i llista de comprovació

És el moment d'aplicar tot el que has après. En aquesta lliçó revisaràs les imatges d'una pàgina real d'un ajuntament, les classificaràs, en proposaràs l'alternativa i decidiràs què cal canviar més enllà de l'alt. Després tens exercicis d'autoavaluació amb la solució i una llista de comprovació per als teus propis projectes.

Cas pràctic: la pàgina de les festes de Sierra Alta

L'Ajuntament de Sierra Alta (municipi fictici de 18.000 habitants) publicarà la pàgina «Festes Patronals 2026» i ha demanat que se'n revisin les imatges abans. Com a organisme del sector públic, el seu web està subjecte al RD 1112/2018 (PDF, s'obre en una finestra nova), que exigeix complir la norma EN 301 549 (PDF, s'obre en una finestra nova) (els requisits web de la qual equivalen als criteris A i AA de les WCAG 2.1); tu ja treballaràs amb les WCAG 2.2.

Pas 1. Fer l'inventari

Recorres la pàgina i anotes tot el contingut no textual amb la seva alternativa actual. Combines tres vistes: la pàgina tal com es veu, WAVE i la pàgina amb els estils desactivats (extensió Web Developer), que revela les imatges de fons. Trobes deu elements:

1. Logotip de l'ajuntament a la capçalera, enllaçat a la portada, amb alt="logo".
2. Panoràmica del poble a la capçalera, com a imatge de fons amb CSS.
3. Cartell oficial de les festes en JPG, únic lloc on apareix el programa, amb alt="cartell".
4. Botó de cerca amb una icona de lupa d'una font d'icones, sense nom.
5. Tres targetes de «Notícies relacionades»: foto i titular en el mateix enllaç, amb el titular repetit a l'alt.
6. Galeria «Festes 2025» amb 12 fotos, totes amb alt="Galeria de fotos de les festes".
7. Gràfic de barres en PNG amb el pressupost de les festes per partides, amb alt="gràfic".
8. Mapa estàtic del recinte firal amb alt="mapa".
9. Icones de xarxes socials al peu, en SVG en línia, sense nom.
10. Formulari d'inscripció al concurs de carrosses amb un CAPTCHA de text distorsionat sense alternativa.

Pas 2. Classificar i proposar l'alternativa

Element	Tipus	Alternativa proposada	Criteri
1. Logotip enllaçat	Funcional	«Ajuntament de Sierra Alta, inici»	1.1.1, 2.4.4
2. Panoràmica de capçalera	Decorativa	Es queda com a fons CSS: és correcte	Cap
3. Cartell	Text en imatge	Programa en HTML i cartell amb «Cartell de les Festes Patronals 2026, del 5 al 13 de setembre; programa complet a continuació»	1.1.1, 1.4.5
4. Botó de lupa	Funcional	Icona amb aria-hidden="true" i botó amb el nom «Cercar»	1.1.1, 4.1.2
5. Targetes de notícies	Decorativa dins d'un enllaç	alt=""	1.1.1
6. Galeria	Informativa	Un alt diferent per foto: «Desfilada de carrosses per l'avinguda de la Constitució al vespre»	1.1.1
7. Gràfic del pressupost	Complexa	«Gràfic de barres: pressupost de les festes 2026 per partides; dades a la taula següent» i taula HTML	1.1.1
8. Mapa del recinte	Complexa	Adreça, accessos, aparcament reservat i lavabos accessibles, en text	1.1.1
9. Icones de xarxes	Funcional	aria-hidden="true" a l'SVG i enllaç amb el nom «Ajuntament de Sierra Alta a Instagram»	1.1.1, 2.4.4
10. CAPTCHA	CAPTCHA	Substituir-lo per un camp parany i un límit d'enviaments	1.1.1

Pas 3. El que l'alt no arregla

Quatre elements necessiten canvis en el contingut, no només en l'atribut:

• El cartell: el programa es publica com una taula per dies (hora, acte, lloc). Així es pot ampliar, traduir, cercar i copiar.
• El gràfic: la taula amb les partides i els seus imports va just a sota, amb una frase de conclusió («la partida més gran és la d'actuacions musicals, amb el 40 % del total»).
• El mapa: el que la persona necessita és arribar-hi. El text amb l'adreça i les referències és l'alternativa més útil per a tothom.
• El CAPTCHA: incompleix 1.1.1 perquè no ofereix alternativa en una altra modalitat. Observa que 3.3.8 Autenticació accessible (mínim) no s'hi aplica, perquè el formulari no és un inici de sessió; tot i així, la millor opció és eliminar la prova.

Pas 4. Verificar

Amb els canvis fets, comproves: WAVE ja no marca imatges sense alternativa ni enllaços buits; amb l'NVDA, la tecla G recorre les imatges i cadascuna se sent amb sentit; Ctrl + F troba «carrosses» al programa; amb zoom al 400 % el programa es llegeix en una columna.

Pas 5. Evitar que torni a passar

Proposes a l'ajuntament tres mesures: una guia d'estil d'una pàgina per a l'àrea de comunicació, configurar el gestor de continguts perquè l'alt sigui obligatori amb l'opció explícita d'«imatge decorativa» i una revisió trimestral per mostreig de deu pàgines recents.

Exercicis d'autoavaluació

1. En una botiga en línia, la foto principal d'una samarreta negra mostra el text «Cartagena 2026» en lletres blanques. Quin alt escriuries?

Veure la solució

Alguna cosa com «Samarreta negra de cotó amb el text Cartagena 2026 en lletres blanques sobre el pit». És una imatge informativa de producte: color, material i text imprès. El text forma part d'una fotografia amb un altre contingut visual, de manera que no és una imatge de text que incompleixi 1.4.5, però ha de ser a l'alternativa (1.1.1).

2. Una targeta de notícia és un únic enllaç amb una foto i el titular «Obre la nova biblioteca municipal». La foto mostra la façana. Quina alternativa porta la foto?

Veure la solució

alt="". El titular ja dona nom a l'enllaç; un alt descriptiu allargaria l'anunci i un d'igual al titular el duplicaria.

3. Un botó és una imatge en què es llegeix «Demanar cita». El seu alt és «Sol·licitar una cita prèvia a l'oficina». Quin problema hi ha i com es corregeix?

Veure la solució

Incompleix 2.5.3 Etiqueta en el nom: el nom accessible no conté el text visible, i qui faci servir el control per veu dirà «prémer Demanar cita» sense resultat. L'alt ha de ser «Demanar cita». Encara millor, per 1.4.5, substituir la imatge per un botó amb text real.

4. El gestor de continguts proposa, generat per IA, «Un grup de persones assegudes al voltant d'una taula en una sala» per a la foto d'una notícia sobre l'aprovació del pressupost municipal al ple. Què fas?

Veure la solució

El fas servir només com a esborrany i el reescrius amb el context que la IA no té: «Els regidors voten a mà alçada el pressupost del 2027 al saló de plens».

5. La pàgina d'un museu mostra al costat de la seva fitxa un quadre del segle XVII. Quina alternativa necessita?

Veure la solució

És una imatge en què l'obra és el contingut: un alt breu que la identifica (títol, autoria, data i tècnica) i una descripció llarga a la pàgina, del general al particular, que separi el que es veu de la interpretació.

6. Un avís de «Tall de trànsit del 3 al 7 de març» apareix a la portada només com a imatge de fons amb CSS. Quins criteris incompleix i quina solució proposes?

Veure la solució

Incompleix 1.1.1 (és l'error F3 de les WCAG: informació important en una imatge de CSS) i 1.4.5, perquè és text en imatge. La solució és publicar l'avís com a text a l'HTML; la imatge de fons es pot quedar com a decoració.

Llista de comprovació

• Cada imatge està classificada segons la seva funció en aquella pàgina.
• Les imatges decoratives porten alt="" o són fons CSS.
• Cap imatge no està mancada de l'atribut alt.
• Cap alt no és un nom de fitxer, «imatge», «foto» o una llista de paraules clau.
• Les imatges funcionals diuen l'acció o la destinació.
• Imatge i text en el mateix enllaç: la imatge va amb alt="".
• Els botons amb text en imatge contenen aquest text en el seu nom.
• Cada foto d'una galeria té una alternativa diferent.
• Els grups d'imatges, com les estrelles, tenen una sola alternativa.
• No hi ha text en imatges excepte logotips o casos essencials.
• Els cartells i els programes també estan publicats en text real.
• Els gràfics, els mapes i les infografies tenen descripció llarga o taula a la pàgina.
• Icones decoratives amagades i botons d'icona amb nom.
• No hi ha CAPTCHA sense alternativa en una altra modalitat.
• Les alternatives proposades per IA les ha revisat una persona.

Per continuar aprenent

• W3C WAI: tutorial d'imatges (Images Tutorial), amb exemples de cada tipus d'imatge.
• W3C WAI: arbre de decisió per a l'atribut alt.
• Understanding WCAG 2.2: 1.1.1 Contingut no textual.
• Understanding WCAG 2.2: 1.4.5 Imatges de text.
• Understanding WCAG 2.2: 2.5.3 Etiqueta en el nom.