(Tiempo estimado: 2 - 4 minutos)

HTMLEn 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:

Captura de pantalla de sitio web

c/ Imagen con alt y con title:

Captura de pantalla de sitio web

PD: se  me olvidaba comentar. Si una imagen está dentro del contenido, aunque no se le ponga nada al atributo "alt", siempre debe llevarlo.

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Comentarios

#1 Smitha839 31-03-2017 12:11
hi and thanks for the actual blog post ive recently been searching regarding this specific advice online for sum hours these days as a result thanks dgbebegaffbebfd f
Citar

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.

 

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo