Les descripcions alternatives (o «alt text») són essencials per assegurar que les imatges a la web siguin accessibles per a tots els usuaris, incloent-hi aquells amb discapacitats visuals que usen lectors de pantalla. Tot seguit, es detallen les pautes sobre quan i com introduir aquestes descripcions.

Quan incloure Descripcions Alternatives

1. Imatges Informatives:

   • Què són: Imatges que contenen informació essencial, com ara gràfics, diagrames, mapes, etc.
   • Què fer: Proporcionar una descripció que transmeti la informació presentada a la imatge.
   • Exemple: Per a un gràfic de barres que mostra les vendes trimestrals: “Gràfic de barres que mostra que les vendes al primer trimestre van ser de 10,000 unitats, al segon trimestre 12,000 unitats, al tercer trimestre 8,000 unitats i al quart trimestre 15,000 unitats ”.

2. Imatges Funcionals:

   • Què són: Imatges que actuen com a enllaços, botons o altres elements interactius.
   • Què fer: Descriure la funció de l'element.
   • Exemple: Per a un botó de cerca amb una lupa: “Botó de cerca”.

3. Imatges Decoratives:

   • Què són: Imatges que no aporten informació ni tenen una funció específica, només milloren el disseny visual.
   • Què fer: Usar un alt buit (alt="") perquè els lectors de pantalla les ignorin.
   • Exemple: Si una pàgina té una vora decorativa de flors, l'alt text seria alt="".

4. Imatges de Text:

   • Què són: Imatges que contenen text rellevant.
   • Què fer: Incloure el text present a la imatge a la descripció alternativa.
   • Exemple: Si una imatge conté un cartell que diu “Rebaixes del 50% a totes les peces”, l'alt text seria: “Rebaixes del 50% a totes les peces”.

5. Imatges Complexes:

   • Què són: Imatges que contenen informació complexa que no pot ser completament descrita en un alt text curt (per exemple, infografies detallades).
   • Què fer: Proporcionar una descripció llarga a la pàgina mateixa o enllaçar a una pàgina separada amb la descripció completa.
   • Exemple: Per a una infografia sobre el cicle de l'aigua: “Infografia detallada sobre el cicle de l'aigua. Més informació disponible al següent enllaç: [enllaç a la descripció detallada]”.

Com Escriure Descripcions Alternatives

1. Sigues Concís i Clar:

   • Les descripcions han de ser breus i directes, descrivint-ne el contingut i la funció de la imatge.

2. Evita Redundàncies:

   • No repeteixis informació ja present en el context proper a la imatge.

3. Sigues Precís:

   • Assegureu-vos que la descripció reflecteixi amb precisió el contingut de la imatge.

4. Utilitza Llenguatge Neutral:

   • Evita suposicions sobre el context o la interpretació de la imatge.

Exemples Pràctics

1. Imatge d'una Persona Llegint:

   • Descripció Alt: “Persona llegint un llibre en un parc”.

2. Botó de Comprar:

   • Descripció Alt: “Botó de comprar”.

3. Diagrama d'un sistema solar:

   • Descripció Alt: “Diagrama del sistema solar mostrant planetes orbitant el sol”.

4. Decoració de Fons:

   • Descripció Alt: alt="".

5. Infografia Complexa:

   • Descripció Alt: “Infografia detallada sobre el canvi climàtic. Més informació al següent enllaç: [enllaç a la descripció detallada]”.

Conclusió

Incloure descripcions alternatives a les imatges no només és una pràctica essencial per a l'accessibilitat web, sinó que també millora la usabilitat per a tots els usuaris. Seguint aquestes pautes, pots assegurar que el teu contingut sigui inclusiu i accessible per a una audiència més àmplia.

Per a més detalls i exemples, podeu consultar les directrius del Web Content Accessibility Guidelines (WCAG) a: https://www.w3.org/WAI/tutorials/images/decision-tree/