Afegir text alternatiu a les imatges

Afegir una descripció enriquida a les imatges i els gràfics per millorar-ne la comprensió

Les imatges poden ser una manera fantàstica d'interactuar amb els visitants i poden ajudar a comunicar idees complexes.

Les descripcions d’imatges també es denominen “descripcions alternatives”, “text alternatiu” i “alt text”. Per als estudiants amb deficiències visuals, les descripcions d’imatges que expliquen el contingut d'una imatge són crucials per a l'aprenentatge. Per a tots els estudiants, les descripcions de text poden proporcionar un context més ampli per ajudar a la comprensió.

Ally comprova les descripcions d’imatges allà on hi ha imatges. Ally comprova les imatges d'una pàgina web o d'un fitxer adjunt.

Ally classifica els problemes com a greus, importants o lleus.

• 
  Greu. Aquests problemes són el risc més alt per a l'accessibilitat i requereixen la màxima atenció.
• 
  Important. Aquests problemes afecten l'accessibilitat i, tot i que no són greus, requereixen atenció.
• 
  Lleu. Aquests problemes s'han de tenir en compte si es vol millorar la puntuació d'accessibilitat.

Les imatges sense text alternatiu són un problema important.

Utilitzar Ally per trobar les imatges que no tenen descripcions

Utilitzeu l'informe d'accessibilitat d'Ally per detectar i corregir problemes d'accessibilitat al vostre lloc web. Utilitzeu l'enllaç proporcionat per a l'informe i inicieu la sessió. Obriu l'informe i consulteu la llista de problemes a la taula Problemes d'accessibilitat.

La taula Problemes d'accessibilitat es mostra a les pestanyes Resum i Domini. Comenceu a la pestanya Domini per veure els problemes específics d'un domini. 

Les imatges sense text alternatiu o descripcions són un problema important. Utilitzeu la pestanya Important de la taula Problemes d'accessibilitat per veure la llista de problemes importants. Seleccioneu els problemes en què les imatges no tenen descripció.

Si comenceu a la pestanya Resum, seleccioneu el problema i, a continuació, el domini on hi ha el problema.

Els problemes de descripcions d'imatges es poden mostrar a la llista amb noms que comencin per Imatge, Document o HTML.

A la llista de problemes de descripcions d'imatges del domini, seleccioneu l'indicador de puntuació al costat d'un element que tingui aquest problema. S'obre el tauler de comentaris de l'editor de contingut.

Vista preliminar d'imatges sense descripció

El tauler de comentaris d'Ally us mostra una vista preliminar del contingut, així com comentaris detallats i ajuda per solucionar els problemes d'accessibilitat. Utilitzeu la vista preliminar per veure les imatges sense descripció.

La vista preliminar mostra les parts del document on hi ha problemes d'accessibilitat específics. La vista preliminar mostra tots els casos d'un tipus de problema cada vegada. Per exemple, si les imatges no tenen descripcions alternatives, la vista preliminar mostra tots els llocs on es produeix aquest problema específic.

Eines de la visualització prèvia

Feu servir les eines de la vista preliminar per explorar els problemes del document.

• Desplaceu-vos per la vista preliminar pàgina a pàgina.
• Comproveu quantes vegades apareix un problema concret.
• Desplaceu-vos pels casos destacats del problema.
• Oculteu o mostreu els casos destacats.
• Apropeu o allunyeu el contingut de la visualització prèvia.
• Si el problema és en un document adjunt, baixeu el fitxer original.

Seguir la guia pas a pas d'Ally per afegir descripcions d'imatge

Ally dona per suposat que teniu coneixements bàsics d'HTML i sabeu com utilitzar el sistema de gestió del contingut (Content Management System, CMS). Per seguir la guia pas a pas, heu de saber editar una pàgina web al codi HTML o codi font del CMS.

Ally organitza aquests comentaris en un arbre de decisions. L'únic que heu de fer és anar seguint les indicacions i responent el que se us va consultant. Obteniu informació sobre quin és el problema, per què és important i com el podeu corregir correctament.

Seleccioneu Com afegir descripcions per seguir les indicacions pas a pas.

Maneres d'afegir descripcions d'imatge a pàgines web

Hi ha més d'una manera d'afegir o editar descripcions d'imatges a les vostres pàgines web.

• HTML: La guia pas a pas d'Ally us indica com trobar i editar les descripcions d'imatges al codi HTML. Bàsicament, es tracta de trobar la pàgina web on hi ha la imatge. Editeu la pàgina. Actualitzar el codi HTML de la imatge per incloure-hi un atribut de text alternatiu. Desar la pàgina.
• Configuració de la imatge: La majoria de CMS ofereixen una manera alternativa d'editar el text alternatiu a la configuració de la imatge. Localitzeu la imatge a la pàgina web o al repositori de fitxers del CMS. Feu servir les eines del CMS per editar la imatge. Afegiu la descripció de la imatge al text alternatiu o un camp de text alternatiu. Deseu la imatge.

Visiteu w3schools per obtenir més informació sobre HTML i CSS

Per què no veig "img src" al meu codi HTML?

La manera més habitual d'afegir imatges a una pàgina web és amb l'atribut HTML img src. Img src és un atribut HTML que utilitza l'URL del fitxer d'imatge per col·locar la imatge a la pàgina web. Però cada CMS és diferent. Pot ser que el vostre lloc utilitzi codi o atributs diferents.

Per exemple, a Drupal podríeu veure alguna cosa semblant a aquesta:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Afegiu text alternatiu a l'inici de l'atribut. Per exemple:

<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Si no veieu img src a l'HTML, proveu d'utilitzar les eines CMS per editar el  Configuració de la imatge.  Cerqueu la imatge a la pàgina web o al repositori de fitxers CMS. Feu servir les eines del CMS per obrir la configuració de la imatge. Afegiu la descripció de la imatge al text alternatiu o un camp de text alternatiu. Deseu la imatge.

Si encara no sabeu com continuar, poseu-vos en contacte amb l'administrador o el desenvolupador del lloc web. Demaneu-los que us ensenyin com s'afegeixen les imatges a les pàgines web i com podeu afegir-hi text alternatiu.