Hi ha una sèrie de qüestions que s'han de tenir en compte a l'hora d'incloure imatges a les pàgines web per tal que aquestes siguin accessibles pels usuaris:

• Text alternatiu.
• Color a les imatges.
• Contrast de les imatges.
• Imatges amb moviment.
• Marcadors per transmetre informació.

Text alternatiu

Les imatges han de tenir una alternativa textual que els navegadors puguin presentar quan no es carrega la imatge. En general, aquesta alternativa ha de ser una descripció breu i significativa del contingut de la imatge.

A l'editor que inclou el gestor de continguts, quan s'inclou una imatge dins un contingut, hi ha un camp anomenat "Text alternatiu" que s'empra per aquesta finalitat. Aquest camp és obligatori, ja que totes les imatges han de tenir una alternativa textual. Per a determinades imatges, a més, serà necessari oferir més informació. En aquest cas, l'editor inclou un camp anomenat "Descripció llarga de la URL", que es troba a la pestanya "Avançat" de les propietats de la imatge; aquest camp ha de contenir l'adreça de la pàgina on es troba la descripció completa de la imatge.

Així, l'alternativa que es dona pot variar segons el tipus d'imatge que s'inclogui a un contingut.

A les imatges següents es pot veure quins són els camps per especificar el text alternatiu i la descripció llarga d'una imatge, si escau.

Recomanacions

• La descripció d'una imatge hauria de ser el que s'explicaria d'aquesta si es descrivís en una conversa xerrada.
• Les imatges decoratives s'haurien d'incloure mitjançant CSS, no al contingut directament.
• A les imatges complexes:
  • La descripció llarga pot estar dins la mateixa pàgina que la imatge, preferentment immediatament abans o després d'aquesta.
  • Se recomana afegir un vincle redundant cap a la descripció detallada al costat de la imatge, ja que no tots els navegadors interpreten correctament l'atribut longdesc del marcador <img>. Per exemple, es pot col·locar com a peu de la imatge.

Color a les imatges

La informació en color també ha d'estar disponible sense color, la qual cosa pot afectar a les imatges. Per exemple, un mapa on hi ha zones de diferents colors segons un determinat criteri o un gràfic de sectors circulars amb regions diferenciades per colors.

Als calendaris acadèmics publicats al lloc web de la UIB es pot veure un exemple d'aquesta dualitat text-color. Els dies del calendari en què hi ha un esdeveniment significatiu estan marcats amb un color determinat segons el tipus d'esdeveniment. Per fer disponible aquesta informació sense color s'han duit a terme les següents accions:

• Quan es passa per damunt d'un dia pintat amb un color determinat, apareix la descripció emergent (tooltip) especificant el tipus d'esdeveniment d'aquell dia.
• Sota el calendari hi ha una taula que especifica per a cada tipus d'esdeveniment, les seves dates d'inici i fi.

Recomanacions

Per corregir el problema de la dependència de color es poden emprar diferents tècniques:

1. Triar colors que contrastin prou de forma que es puguin diferenciar entre ells en una escala de grisos.
2. Emprar trames per diferenciar les àrees dependents del color.
3. Col·locar la llegenda damunt de cada regió del mapa.

Contrast de les imatges

És necessari que les imatges contrastin prou, especialment aquelles que transmeten informació textual. Per tal que el contrast de color de fons i de primer pla sigui suficient s'ha de complir, segons la norma UNE:

• Diferència de color de fons i de primer pla:  425
• Diferència de brillo de fons i de primer pla:  105

Existeixen programes gratuïts per comprovar el contrast a les imatges. Un d'ells és el Colour Contrast Analyser.

Imatges amb moviment

S'ha d'evitar posar imatges amb moviment.

En cas que s'empri una imatge amb moviment, aquest s'ha de poder aturar o ha de durar com a màxim 5 segons.

A més, si la imatge conté informació, aquesta s'ha de presentar de forma íntegra quan s'aturi el moviment.

Recomanacions

• El moviment de les imatges hauria de ser el més curt possible, només alguns segons.
• Sobre els gifs animats o bé s'han de poder aturar o només es poden mostrar un pic (sense bucle de repetició).

Marcadors en lloc d'imatges per transmetre informació

S'han d'emprar marcadors i estils ((X)HTML+CSS) sempre que sigui possible per transmetre la informació, en lloc d'emprar imatges. L'ús d'aquestes tecnologies promou l'accessibilitat, ja que:

• El text es pot redimensionar i es pot interpretar pels productes de suport, com els lectors de pantalla.
• Els mecanismes de cerca poden emprar la informació del text.

Recomanacions

Només s'haurien d'emprar imatges per transmetre informació textual en els següents casos:

• Logotips i imatges promocionals.
• Encapçalaments que requereixin tipografies no reproduïbles mitjançant (X)HTML i CSS.