En este artículo vamos a ver algo que no es sólo para Joomla! sino que nos vale para cualquier gestor de contenidos. Se trata de ver el comportaminto que tienen los atributos alt, longdesc y title de la etiqueta <img> de HTML.
Vamos a ver estos comportamientos.
El motivo de este artículo viene de un mail que recibí de un amigo este fin de semana. En él me comentaba que, cuando pasaba con el ratón por encima del menú, se veía el "título alternativo". Pero esto solo se daba en Internet Explorer. Si utilizaba Firefox o Chrome no se mostraba.
Cuando leí esto y vi que solo se veía en Internet Explorer enseguida me di cuenta que se trataría de alguna de esas interpretaciones que nos da el navegador y, cuando fui a ver su sitio web, y vi que el menú lo tenía con enlaces en imágenes, comprendí de qué se trataba: él utiliza el atributo "alt" de la etiqueta imágen y es lo que él llama "título alternativo". Esta etiqueta se utiliza como texto alternativo de la imágen, siempre que éste deba llevarlo (es decir, sea parte del contenido y tenga una interpretación; ya que si es parte del diseño debería estar en el CSS). En principio no debería mostrarse al pasar por encima con el ratón, puesto que para eso existe el atributo "title", pero IE lo hace de esta manera. Otra cosa que no utilizaba y que sería más conveniente, es el atributo "title" de la etiqueta <a href="/"> (la que se encarga de formar un enlace).
Lo correcto (aunque no lo sería del todo), en el caso de este menú, sería utilizar el atributo "title" de la etiqueta <a href="/"> y el atributo "alt" de la etiqueta <img src="/">. Es decir, algo así:
<a href="/enlace.html" title="Título del enlace al que se va a ir"><img src="/imagen.jpg" alt="Nombre del enlace"/></a>
Yo no utilizaría imágenes para crear el menú. Es preferible hacerlo con texto y, si se quiere añadir estilo, para eso tenemos las hojas de estilo o CSS.
Para finalizar esta puntualización del uso de estos atributos, veremos otro que tiene la etiqueta <img>. Se trata del atributo "longdesc" y se utiliza para complementar al atributo "alt"; es decir, proporcionar una descripción más larga que la que proporciona este último.
Lo que contiene este atributo es la dirección de una página web en la que se pone la descripción de la imagen. Para hacernos una idea, imaginad una imagen de una gráfica. Para una persona que pueda verla, seguro que puede interpretarla. Pero para personas con discapacidad visual o invidentes, necesitarán de una explicación de la misma (puesto que la imagen es de contenido).
Un uso correcto sería este:
<img src="/grafica.jpg" alt="Gráfica de datos de natalidad" longdesc="descripcion-grafica-natalidad.html"/>
Dentro de la página se describirían los datos que aparecen en la imagen.
Espero que os ayude este artículo a la hora de escribir de una forma más accesible.
Tenéis más información sobre estos atributos en ¿Qué hace el atributo alt? y El atributo longdesc.
Ejemplos:
a) Imagen sin alt:
b/ Imagen con alt:
c/ Imagen con alt y con title:
PD: se me olvidaba comentar. Si una imagen está dentro del contenido, aunque no se le ponga nada al atributo "alt", siempre debe llevarlo.
