Accesibilidad en la web: Textos alternativos en imágenes

Toda web accesible debe proporcionar para cada elemento no textual una alternativa en texto. Para hacer esto utilizamos las propiedades alt, longdesc o el propio contenido de la etiqueta.

Esta regla responde a Prioridad 1 de la WAI.

Los elementos para los que tenemos que tener esta regla en cuenta son:

• Imágenes (incluidas las utilizadas para listados, como spacers y botones)


• Representaciones gráficas de texto (se incluyen los símbolos)


• Regiones de imágenes que utilizan map


• Animaciones (por ejemplo con imágenes GIF)


• Applets y objetos de programación como scripts


• Frames


• Sonidos (reproducidos con o sin interacción por parte del usuario)

Hasta aquí la norma, incluir textos alternativos, pero es deber del desarrollador proporcionar textos útiles y apropiados a cada situación.

En esta ocasión me centraré en las imágenes, explicando los casos con los que nos podemos encontrar, y cómo resolverlos.

Se pueden clasificar las imágenes utilizadas en la web, a grandes rasgos en:

1. Decorativas
   Si no aportan nada en absoluto al contenido de la web utilizaremos alt=""
   Si contienen un texto pondremos el texto de la imagen (Ej.: <img src="ministerioCultura.gif" alt="Ministerio de Cultura">)
   Si representan un logotipo (alt="Google logo")
   Cuando la ilistración está explicada en el texto (alt="")
   Si está dentro de un enlace <a href=...>...</a> y es lo único que aparece; no poner alt="Enlace a..., alt="Ir a..., los navegadores deberían representar los enlaces como tales.


2. Formato
   Para dar espacios adicionales (alt=" ")
   Para simular listas (alt="*")
   Para simular líneas de separación (alt="")


3. Apoyo al texto
   El atributo alt depende de la información que aporte la imagen.
   Ejemplo 1: <img src="alerta.gif" alt="Atención:"> Lea atentamente las instrucciones.
   Ejemplo 2: <img src="congreso.jpg" alt="Imagen con la fachada del Congreso"> Hoy se celebra un pleno extraordinario que determinará si en nuestro ...


4. Sustitución de texto
   Cuando la imagen representa una letra o símbolo (src="beta.gif" alt="Beta")
   Cuando la imagen representa por si misma la información, es necesario aportar una descripción más detallada, por ejemplo en mapas, gráficos, etc. Para estos casos se utiliza longdesc. Como es un atributo que no está completamente soportado por los navegadores, se utiliza lo que se conoce como d-link, que no es otra cosa que proporcionar un enlace a la descripción textual de la imagen. Puede hacerse de dos modos:
   Ejemplo 1:
   

   
   <a href="prediccion.txt"
     title="Seleccione para una descripción en texto">
     <img src="imagenes/prediccion.jpg"
          alt="Predicción del tiempo (España 31/marzo/2005),
               seleccione para una descripción en texto"/>
   </a>

   
   Ejemplo 2:
   

   
   <img src="imagenes/prediccion.jpg"
        alt="Predicción del tiempo (España 31/marzo/2005)"/>
     <a href="prediccion.txt"
        title="Predicción del tiempo (España 31/marzo/2005)">
       D
     </a>
   

   
   


5. Mapa
   Si la imagen se utiliza como mapa (etiqueta map), poner el objetivo global en alt.
   Si el mapa es un un client-side map, poner a cada región un título descriptivo mediante el atributo title