En aquest tema, aprendrem com proporcionar alternatives de text per a imatges, una pràctica essencial per garantir que el contingut visual sigui accessible per a tots els usuaris, incloent aquells que utilitzen lectors de pantalla o tenen discapacitats visuals.

Les alternatives de text són crucials per a:

• Usuaris amb discapacitats visuals: Els lectors de pantalla utilitzen el text alternatiu per descriure les imatges.
• Millora del SEO: Els motors de cerca utilitzen el text alternatiu per indexar i comprendre el contingut de les imatges.
• Situacions de baixa connectivitat: Quan les imatges no es carreguen, el text alternatiu proporciona context.

1. Sigues Descriptiu i Concís: Proporciona una descripció clara i breu de la imatge.
2. Evita Redundàncies: No repeteixis informació que ja està present en el text adjacent.
3. Contextualitza: Assegura’t que el text alternatiu sigui rellevant per al context en què es troba la imatge.
4. Evita Frases com "Imatge de...": Els lectors de pantalla ja indiquen que es tracta d'una imatge.

• Imatge d'un gos jugant a la gespa:

  <img src="gos-jugant.jpg" alt="Gos jugant a la gespa amb una pilota vermella">
  

• Logotip d'una empresa:

  <img src="logotip-empresa.png" alt="Logotip de l'empresa XYZ">
  

• Gràfic de vendes mensuals:

  <img src="grafic-vendes.png" alt="Gràfic que mostra l'increment de vendes mensuals de gener a desembre">
  

Proporciona un text alternatiu adequat per a les següents imatges:

1. Una fotografia d'un plat de pasta amb salsa de tomàquet i alfàbrega.
2. Un gràfic de barres que mostra la comparació de vendes entre tres productes diferents.
3. Un logotip d'una aplicació de missatgeria.

1. Fotografia de pasta:

   <img src="pasta.jpg" alt="Plat de pasta amb salsa de tomàquet i alfàbrega">
   

2. Gràfic de barres:

   <img src="grafic-barres.png" alt="Gràfic de barres comparant les vendes de productes A, B i C">
   

3. Logotip d'aplicació:

   <img src="logotip-missatgeria.png" alt="Logotip de l'aplicació de missatgeria ChatNow">
   

• Error Comú: Deixar l'atribut alt buit per a imatges importants.

  • Consell: Sempre proporciona un text alternatiu significatiu per a imatges que contenen informació rellevant.

• Error Comú: Utilitzar el mateix text alternatiu per a imatges diferents.

  • Consell: Assegura’t que cada text alternatiu sigui específic per a la imatge que descriu.

Proporcionar alternatives de text per a imatges és una pràctica fonamental per a l'accessibilitat web. Assegura’t de seguir les millors pràctiques per garantir que el teu contingut sigui accessible per a tots els usuaris. En el següent tema, explorarem com crear ginys JavaScript accessibles.