Tipus d'imatge: decorativa, informativa, funcional, complexa i text en imatge

Abans d'escriure un text alternatiu cal respondre una pregunta: què fa aquesta imatge a la pàgina? La resposta determina si l'alt ha d'estar buit, ha de ser una frase curta, ha de descriure una acció o ha de remetre a una descripció llarga. Aquesta lliçó presenta la classificació d'imatges que fa servir la WAI en el seu tutorial d'imatges, els criteris WCAG implicats i una taula de decisió que podràs aplicar a qualsevol contingut.

El que exigeixen les WCAG

El criteri 1.1.1 Contingut no textual (nivell A) estableix que tot contingut no textual que es presenta a la persona usuària té una alternativa textual que compleix el mateix propòsit, amb excepcions concretes: controls (necessiten un nom), multimèdia (es tracta en altres criteris), proves o exercicis que deixarien de tenir sentit en text, experiències sensorials, CAPTCHA (alternatives en diferents modalitats) i decoració (la tecnologia de suport l'ha de poder ignorar).

El criteri 1.4.5 Imatges de text (nivell AA) afegeix que, si la tecnologia permet presentar un text amb l'aparença visual desitjada, es fa servir text real i no una imatge de text, tret que la imatge sigui personalitzable per la persona usuària o que la presentació concreta sigui essencial (un logotip, per exemple).

Les cinc categories

1. Imatge decorativa

No aporta informació: separadors, textures de fons, una foto d'ambient al costat d'un text que ja ho diu tot. La seva alternativa correcta és un alt buit (alt=""), que indica al lector de pantalla que la ignori. Compte: buit no és el mateix que absent. Sense l'atribut alt, molts lectors de pantalla llegiran el nom del fitxer («IMG_20240312.jpg»). Si la imatge es posa amb CSS com a fons, ja és invisible per a la tecnologia de suport, cosa que només és apropiada si de debò és decorativa.

2. Imatge informativa

Transmet un concepte o una informació senzilla: la foto del producte, la imatge d'una persona en una notícia, un pictograma de «prohibit fumar». L'alt descriu el que aporta la imatge en aquest context, de manera breu (una frase, idealment de menys de 125 caràcters, tot i que no és un límit tècnic).

3. Imatge funcional

És la imatge que actua com a control: el logotip que enllaça a la portada, la icona de la lupa que és el botó de cercar, la imatge d'una paperera per esborrar. Aquí l'alt no descriu la imatge, sinó la funció: «Inici», «Cercar», «Eliminar». Descriure el dibuix («lupa») és un error típic. Els casos combinats (imatge i text en el mateix enllaç, botons amb imatge, grups d'imatges i galeries) tenen la seva pròpia lliçó més endavant.

4. Imatge complexa

Gràfics, diagrames, infografies, mapes, plànols. Contenen més informació de la que cap en una frase. Necessiten un alt breu que identifiqui la imatge i una descripció llarga en text (a la mateixa pàgina, en un desplegable o en una pàgina enllaçada). Ho veurem en detall a la lliçó «Imatges complexes: gràfics, infografies, mapes i descripcions llargues».

5. Text en imatge

Una imatge que conté text: el bàner d'una campanya, una cita maquetada com a imatge, una taula escanejada. La regla principal és evitar-la (1.4.5): el text es maqueta amb HTML i CSS. Si no es pot evitar, l'alt ha de contenir exactament el mateix text que es veu a la imatge. Les excepcions, els cartells, els bàners i les imatges de fons amb CSS es tracten a fons a la lliçó «Text en imatges i imatges de fons».

Taula de decisió

Codi de referència

<!-- Decorativa -->
<img src="separador.png" alt="">

<!-- Informativa -->
<img src="producto-4532.jpg"
     alt="Cadira d'oficina ergonòmica de tela grisa amb reposabraços">

<!-- Funcional (la imatge és l'únic contingut de l'enllaç) -->
<a href="/"><img src="logo.svg" alt="ADDAW - Inici"></a>

<!-- Incorrecte: sense alt, el lector llegirà el nom del fitxer -->
<img src="DSC_0412.jpg">

Com comprovar-ho

• WAVE marca amb icones diferents les imatges sense alt, amb alt buit, amb alt sospitós (nom de fitxer, «imatge», «foto») i les imatges enllaçades sense text.
• A les eines de desenvolupament o amb l'extensió «Web Developer», mostra els alt al costat de cada imatge i llegeix-los sense mirar les imatges.
• Un lector de pantalla que recorre la pàgina amb la tecla G (gràfics, a l'NVDA) revela de seguida què se sent realment.

Resum

• 1.1.1 Contingut no textual (A): tota imatge necessita una alternativa que compleixi el seu mateix propòsit, o s'ha d'ignorar si és decorativa.
• Decorativa: alt="". Informativa: una frase. Funcional: l'acció o la destinació. Complexa: alt breu més descripció llarga.
• 1.4.5 Imatges de text (AA): fes servir text real excepte en logotips o presentacions essencials.
• Un alt absent sol fer que es llegeixi el nom del fitxer; un alt buit fa que la imatge s'ignori.
• El context decideix la categoria: la mateixa imatge pot ser decorativa en una pàgina i informativa en una altra.