El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Al llarg dels mòduls anteriors hem anat ajornant el detall de les alternatives textuals "fins al Mòdul 5". Ha arribat el moment de saldar aquest deute. El criteri 1.1.1 (Contingut no textual) és de nivell A i és, probablement, el més incomplert de tota la web: exigeix que tota imatge tingui una alternativa textual apropiada... i "apropiada" no sempre significa "descriure el que es veu". El mateix fitxer d'imatge pot necessitar un alt llarg, un alt buit o descriure una acció, segons la seva funció a la pàgina. En aquesta lliçó construïm un arbre de decisió que aplicarem a les imatges reals de Cursalia: la miniatura del curs, el logotip, les icones de categoria i el gràfic de progrés de l'alumne. Amb ella tanquem el Mòdul 5.

Contingut

Per què l'alt correcte depèn de la funció, no de la imatge
Arbre de decisió de l'alt
Imatges decoratives, informatives, funcionals, de text i complexes
Com redactar un bon alt
figure i figcaption
SVG, icones i imatges de fons CSS
Aplicació a Cursalia
Errors comuns, exercicis i conclusió

Per què l'`alt` correcte depèn de la funció

La Marta, amb NVDA, no veu la imatge: sent el que posis a l'alt. I aquí està la idea que ho canvia tot: la mateixa foto pot requerir alternatives completament diferents segons per a què estigui allà. Una foto d'un cadenat pot ser:

pura decoració al costat d'un titular → alt="" (que la TA la ignori),
la il·lustració d'un article sobre seguretat → alt="Cadenat tancat sobre un teclat" (informa),
la icona d'un botó de "bloqueja compte" → alt="Bloqueja compte" (descriu l'acció).

Per això no existeix un alt "correcte" en abstracte: primer decideixes quina funció compleix la imatge i d'aquí surt l'alternativa.

Arbre de decisió de l'`alt`

flowchart TD
  A[La imatge aporta informació<br/>o compleix una funció?] -->|No, és decorativa| B["alt buit"]
  A -->|Sí| C{És interactiva?<br/>enllaç o botó}
  C -->|Sí, funcional| D[alt descriu l'ACCIÓ<br/>no la imatge]
  C -->|No| E{Quin tipus<br/>d'informació?}
  E -->|Contingut simple| F[alt descriu la informació]
  E -->|És text dins<br/>de la imatge| G[Evita-la; si no,<br/>alt amb el text exacte]
  E -->|Gràfic/diagrama<br/>complex| H[alt breu +<br/>descripció llarga adjacent]

Recorre aquest arbre per a cada imatge. La primera pregunta —"aporta res o és només adorn?"— és la més important i la que més gent es salta.

Els cinc tipus d'imatge

Decorativa

No aporta informació: separadors, fons ornamentals, una foto genèrica de farciment al costat d'un text que ja ho diu tot. Ha de ser ignorada per la tecnologia d'assistència, i per això l'alt va buit però present:

<!-- BÉ: alt buit → NVDA la salta per complet -->
<img src="ornament.svg" alt="">

<!-- MALAMENT: sense alt → alguns lectors llegeixen el nom del fitxer: "ornament punt svg" -->
<img src="ornament.svg">

<!-- MALAMENT: alt redundant que només genera soroll -->
<img src="ornament.svg" alt="imatge decorativa d'adorn">

La diferència entre alt="" i no posar alt és enorme: alt="" diu explícitament "no hi ha res a anunciar"; ometre l'atribut fa que molts lectors llegeixin la URL del fitxer. Alternativa equivalent: role="presentation" (o role="none"), tot i que l'alt="" és el més simple i robust.

Informativa

Transmet informació que el text circumdant no dona. L'alt ha de comunicar aquesta informació, de manera concisa:

<!-- La imatge aporta una dada; l'alt la transmet -->
<img src="grafic-creixement.png"
     alt="Les matrícules van créixer un 40% entre gener i juny">

Pregunta't: "si tragués la imatge i la substituís per aquest text, el lector rebria el mateix?". Si la resposta és sí, el teu alt és bo.

Funcional

La imatge està dins d'un enllaç o un botó i representa la seva acció. Aquí l'alt no descriu la imatge, descriu el que fa:

<!-- MALAMENT: descriu la imatge; la Marta sent "logotip de Cursalia" i no sap que és un enllaç útil -->
<a href="/"><img src="logo.svg" alt="Logotip de Cursalia"></a>

<!-- BÉ: descriu l'ACCIÓ de l'enllaç -->
<a href="/"><img src="logo.svg" alt="Cursalia, ves a l'inici"></a>

<!-- Icona dins de botó: l'alt/label és l'acció -->
<button><img src="lupa.svg" alt="Cerca"></button>

Si un <button> només conté una icona SVG, amaga l'SVG amb aria-hidden="true" i posa el nom al mateix botó amb aria-label (com vam veure al reproductor de 05-03).

De text

Una imatge el contingut de la qual és text (un botó "Compra" renderitzat com a imatge, un titular en un JPG). S'ha d'evitar: no escala, no es pot seleccionar, empitjora amb el zoom de la Sofía i viola el criteri 1.4.5 (Imatges de text). Fes servir text real amb CSS. Si és inevitable (un logotip amb un lema), l'alt ha de contenir el text exacte:

<!-- Evita-ho. Però si no hi ha més remei: -->
<img src="oferta.png" alt="Rebaixes: 50% de descompte fins al 30 de juny">

Complexa

Gràfics, diagrames, mapes, infografies: contenen massa informació per a un alt curt. La tècnica és doble: un alt breu que doni el titular, i una descripció llarga adjacent (o vinculada amb aria-describedby):

<img src="progres-alumne.png"
     alt="Progrés de l'alumne per mòdul"
     aria-describedby="desc-progres">

<div id="desc-progres">
  Mòdul 1: completat al 100%. Mòdul 2: 80%. Mòdul 3: 45%.
  Mòduls 4 a 7: sense començar. Progrés total del curs: 46%.
</div>

L'alt curt ("Progrés de l'alumne per mòdul") permet a la Marta decidir si vol el detall; la descripció llarga, referenciada amb aria-describedby, li dona les dades completes. Aquesta descripció, a més, beneficia tothom: és text real, indexable i seleccionable.

Com redactar un bon `alt`

Regles pràctiques:

Concís. Una frase sol bastar. Els lectors no permeten pausar a mitja d'un alt llarguíssim.
Sense "imatge de" / "foto de". La TA ja anuncia que és una imatge; afegir "imatge de..." és redundant i molest. Escriu directament el contingut.
Contextual. El mateix dibuix porta un alt diferent en un article que en un botó. Pensa en la funció.
Sense farciment de paraules clau. L'alt no és per a SEO forçat; omplir-lo de keywords perjudica la Marta i penalitza igualment.
Puntua. Un punt final fa que el lector faci una pausa natural.

En comptes de…	Escriu…
`alt="imatge"`	`alt=""` (si és decorativa) o el contingut real
`alt="foto d'una persona programant amb un portàtil"`	`alt="Desenvolupadora escrivint codi"` (si aporta) o `alt=""` (si és farciment)
`alt="logo"` en un enllaç d'inici	`alt="Cursalia, ves a l'inici"`
`alt="grafic.png"`	`alt="Progrés total del curs: 46%"`

`figure` i `figcaption`

Quan una imatge porta un peu visible per a tothom, fes servir <figure> amb <figcaption>. Compte: el figcaption no substitueix l'alt; compleixen funcions diferents. L'alt descriu la imatge per a qui no la veu; el figcaption és una llegenda per a tothom.

<figure>
  <img src="arbre-accessibilitat.png"
       alt="Arbre d'accessibilitat derivat del DOM, amb rols i noms">
  <figcaption>Figura 3. El navegador construeix l'arbre d'accessibilitat a partir del DOM.</figcaption>
</figure>

De vegades el figcaption ja ho descriu tot i l'alt pot ser breu o buit per no duplicar; però per defecte omple tots dos amb contingut complementari.

SVG, icones i imatges de fons CSS

SVG inline. Un <svg> no té atribut alt. Per fer-lo accessible com a imatge, dona-li role="img" i un nom amb <title> o aria-label; si és decoratiu, aria-hidden="true":

<!-- SVG informatiu -->
<svg role="img" aria-labelledby="t1"><title id="t1">Curs completat</title>…</svg>

<!-- SVG decoratiu dins d'un botó que ja té text -->
<button>Desa <svg aria-hidden="true" focusable="false">…</svg></button>

El focusable="false" evita que alguns navegadors (vells Edge/IE) donin focus a l'SVG i creïn parades de tab fantasma.

Icones. Dues tècniques:

Icon fonts (una <i> amb un caràcter de font d'icones): sempre aria-hidden="true" perquè el caràcter es pot llegir com un símbol estrany. El significat va en text a part.
SVG és preferible: escala nítid i es controla millor. Mateix principi: si la icona acompanya un text, aria-hidden; si la icona és l'única informació (un botó només-icona), dona-li nom amb aria-label al control.

<!-- Icona decorativa al costat de text: s'amaga a la TA -->
<a href="/certificats"><i class="bi bi-award" aria-hidden="true"></i> Certificats</a>

<!-- Botó només-icona: el nom va al control, la icona s'amaga -->
<button aria-label="Tanca"><i class="bi bi-x" aria-hidden="true"></i></button>

Imatges de fons CSS (background-image). No són accessibles: no estan a l'arbre d'accessibilitat i no admeten alt. Per això són correctes per a pura decoració, però mai han de portar informació. Si un background-image transmet alguna cosa (una icona d'estat, un gràfic), és un error: passa-ho a un <img> amb alt o afegeix text alternatiu visible/amagat.

Aplicació a Cursalia

Recorrem les imatges reals de la plataforma amb l'arbre de decisió:

Imatge de Cursalia	Tipus	Alternativa correcta
Miniatura del curs a la targeta del catàleg	Funcional (tota la targeta és un enllaç) o informativa	Si el títol del curs ja hi és com a text a la targeta, la miniatura és decorativa → `alt=""` (evita que la Marta senti el títol dues vegades). Si la miniatura fos l'únic enllaç, `alt="Mostra el curs: Accessibilitat Web"`.
Logotip a la capçalera, dins de l'enllaç d'inici	Funcional	`alt="Cursalia, ves a l'inici"` (descriu l'acció, no "logo").
Icones de categoria (bootstrap-icons) al costat del nom	Decoratives (hi ha text al costat)	`aria-hidden="true"` a la icona; el nom de la categoria el dona el text.
Gràfic de progrés del panell de l'alumne	Complexa	`alt` breu ("Progrés per mòdul") + descripció llarga amb els percentatges via `aria-describedby`.

El cas de la miniatura és el més instructiu: en una targeta de catàleg, el títol del curs gairebé sempre ja hi és en text, així que donar-li alt amb el mateix títol fa que la Marta el senti dues vegades. La miniatura passa a ser decorativa (alt="") precisament perquè la seva informació ja està coberta pel text. De nou: la funció mana sobre el contingut visual.

Errors Comuns i Consells

Ometre l'alt en lloc de alt="". Sense alt, molts lectors llegeixen la URL del fitxer. Per a decoratives, alt="" explícit.
Escriure "imatge de..." / "foto de...". Redundant: la TA ja anuncia que és una imatge.
Descriure la imatge en un element funcional. En un logotip-enllaç, alt="logo" no diu on porta. Descriu l'acció.
Ficar un gràfic complex en un alt de 300 caràcters. Ningú pot sentir això d'una tirada. Fes servir alt breu + descripció llarga.
Informació en background-image. No arriba a la TA. Els fons CSS només per a decoració.
Duplicar títol de curs a la miniatura. La Marta el sent dues vegades. Si el text ja hi és, alt="".
Consell: davant de qualsevol imatge, fes-te dues preguntes en ordre: (1) aporta informació o funció, o és decoració? i (2) és interactiva?. Amb aquestes dues respostes, l'arbre de decisió et dona l'alt correcte.

Exercicis

Exercici 1. Per a cada imatge de Cursalia, indica el tipus i l'alt (o tècnica) adequat: (a) una línia divisòria ornamental entre seccions; (b) el logotip dins de l'enllaç a l'inici; (c) el gràfic de barres del progrés de l'alumne.

Exercici 2. Aquest codi d'una targeta de catàleg té un problema d'accessibilitat. Detecta'l i corregeix-lo.

<a href="/curs/accessibilitat">
  <img src="thumb.jpg" alt="Accessibilitat Web">
  <h3>Accessibilitat Web</h3>
</a>

Exercici 3. Tens un botó que només conté un SVG d'una paperera per eliminar un element. Escriu l'HTML accessible.

Solucions

Solució 1. (a) Decorativa → <img src="linia.svg" alt=""> (o un fons CSS, ja que és pura decoració). (b) Funcional → <a href="/"><img src="logo.svg" alt="Cursalia, ves a l'inici"></a>; l'alt descriu l'acció, no "logo". (c) Complexa → alt="Progrés per mòdul" breu + una descripció llarga adjacent amb els percentatges de cada mòdul, vinculada amb aria-describedby.

Solució 2. El problema és la duplicació: l'alt de la miniatura repeteix el títol que ja hi és al <h3>. La Marta sentiria "Accessibilitat Web" dues vegades. Com que la informació ja hi és en text, la miniatura és decorativa:

<a href="/curs/accessibilitat">
  <img src="thumb.jpg" alt="">
  <h3>Accessibilitat Web</h3>
</a>

Solució 3. El botó només-icona necessita nom al control i l'SVG amagat a la TA:

<button type="button" aria-label="Elimina">
  <svg aria-hidden="true" focusable="false"><!-- icona paperera --></svg>
</button>

L'aria-label="Elimina" dona el nom accessible (descriu l'acció); aria-hidden="true" evita que l'SVG s'anunciï; focusable="false" evita parades de tab fantasma.

Conclusió

Amb aquesta lliçó tanquem el Mòdul 5. Ja no veus una imatge i et preguntes "què poso a l'alt?": recorres l'arbre de decisió —decorativa, informativa, funcional, de text o complexa— i la funció de la imatge et dicta la resposta. I amb això tanquem també la fase de construcció del curs: als mòduls 1 a 5 hem après què és l'accessibilitat, per què importa, què exigeix WCAG i com implementar-la —estructura semàntica, formularis, ARIA, contrast, widgets amb JavaScript, teclat, multimèdia i imatges—. Sabem construir accessible.

Ara falta la pregunta decisiva: realment funciona el que hem construït? Un aria-expanded pot estar mal sincronitzat, un focus trap pot tenir una fuita, un alt pot sonar fatal amb NVDA. Tot això s'ha de verificar. Al Mòdul 6 aprendrem a comprovar l'accessibilitat de manera sistemàtica: proves manuals (teclat i lector de pantalla), eines automatitzades (axe, Lighthouse) i els seus límits, proves amb usuaris reals i tecnologies d'assistència, i interpretació d'informes d'auditoria. Passem de construir a demostrar que Cursalia és accessible de debò.

Proporcionar Alternatives de Text per a Imatges

Contingut

Per què l'`alt` correcte depèn de la funció

Arbre de decisió de l'`alt`

Els cinc tipus d'imatge

Decorativa

Informativa

Funcional

De text

Complexa

Com redactar un bon `alt`

`figure` i `figcaption`

SVG, icones i imatges de fons CSS

Aplicació a Cursalia

Errors Comuns i Consells

Exercicis

Solucions

Conclusió

Curs d'Accessibilitat Web

Mòdul 1: Introducció a l'Accessibilitat Web

Mòdul 2: Comprensió de les Discapacitats i les Tecnologies d'Assistència

Mòdul 3: Principis del Disseny Accessible

Mòdul 4: Implementació de l'Accessibilitat en HTML i CSS

Mòdul 5: Accessibilitat en JavaScript i Multimèdia

Mòdul 6: Proves i Avaluació de l'Accessibilitat

Mòdul 7: Temes Avançats d'Accessibilitat

Proporcionar Alternatives de Text per a Imatges

Contingut

Per què l'alt correcte depèn de la funció

Arbre de decisió de l'alt

Els cinc tipus d'imatge

Decorativa

Informativa

Funcional

De text

Complexa

Com redactar un bon alt

figure i figcaption

SVG, icones i imatges de fons CSS

Aplicació a Cursalia

Errors Comuns i Consells

Exercicis

Solucions

Conclusió

Curs d'Accessibilitat Web

Mòdul 1: Introducció a l'Accessibilitat Web

Mòdul 2: Comprensió de les Discapacitats i les Tecnologies d'Assistència

Mòdul 3: Principis del Disseny Accessible

Mòdul 4: Implementació de l'Accessibilitat en HTML i CSS

Mòdul 5: Accessibilitat en JavaScript i Multimèdia

Mòdul 6: Proves i Avaluació de l'Accessibilitat

Mòdul 7: Temes Avançats d'Accessibilitat

Per què l'`alt` correcte depèn de la funció

Arbre de decisió de l'`alt`

Com redactar un bon `alt`

`figure` i `figcaption`