El atributo Alt es uno de los elementos más importantes desde el punto de vista de SEO (Search Engine Optimization, por sus siglas en inglés) debido a que se trata del texto alternativo o contextualización que describe puntualmente una imagen insertada en la etiqueta img de una página HTML y que servirá para que los buscadores la encuentren y la tomen en cuenta en sus resultados como Google images; además de su importancia en la accesibilidad y los programas que leen la pantalla para ayudar a las personas con una discapacidad visual.
¿Cuál es la utilidad de agregar el atributo alt?
Se utiliza para describir todas las imágenes que se incluyen en un sitio web como imágenes de logotipos, imágenes de noticias, fotos de artículos, botones que no contengan texto, entre otras. Si se utiliza el atributo alt adecuadamente, los buscadores le darán visibilidad a las imágenes en sus resultados y por consecuencia se tendrán visitas a las páginas que realicen esta buena práctica.
Otra utilidad, es dirigida hacia los lectores de pantalla, cuyo funcionamiento se basa en la lectura del código de cada página; por lo que si las imágenes no tuvieran el atributo alt o no estuviera bien aplicada, las personas que utilizan este tipo de software, que generalmente son las personas con alguna discapacidad visual, no tendrían ninguna idea sobre las imágenes que se le están presentando en pantalla.
En general se trata de contextualizar la imagen para que los robots sepan de qué se trata dicha imagen y así mostrarla en los resultados que los usuarios están buscando.
¿Cómo se agrega el atributo alt en las imágenes?
El atributo alt se agrega dentro del elemento <body> en cada pagina HTML donde se encuentran las imágenes, de la siguiente forma:
<body>
<img src="/images/logotipo.png" alt="Escudo de la UNAM">
</body>
¿Cuáles son las buenas prácticas mínimas que debería usar para el atributo alt de una página?
Para mejorar la visibilidad del contenido de los sitios web se debe considerar al momento del desarrollo, aplicar buenas las siguientes prácticas en las imágenes:
- Para cada imagen utilizada en el sitio web, se debe llenar el campo del atributo alt.
-
El atributo alt debe describir de manera puntual y específica la imagen referida y no el tema general de la página.
- Utilizar palabras clave que ayuden a describir la imagen sin llegar al exceso, se sugiere un máximo de 6 palabras por cada imagen.
- También se recomienda que el nombre de la imagen haga referencia al contenido de ésta, y evitar poner nombre genéricos o numéricos (“123.jpg”, “im1.gif”, “graf123_er.png”, etc.)
Ejemplos del atributo alt bien aplicado:
<img src="escudounam.jpg" alt="Escudo y logotipo de la UNAM"/>
<img src="profesor.jpg" alt="Profesor impartiendo clases en aula"/>
<img src="escudosede.jpg" alt="Escudo de la sede en el extranjero"/>
¿Qué pasa si no se encuentra definido el atributo alt en las imágenes?
Aunque Google y otros buscadores indexan imágenes pese a no contar con el atributo alt (debido a otras alternativas de indexación de los buscadores como títulos cercanos a la imagen, etc), si lo utilizamos adecuadamente ayudaremos a que estos robots identifiquen más rápido y de una manera óptima nuestras imágenes.
Cómo citar este documento:
Islas Flores, M. A. (2020, abril). Guía Técnica - Atributo Alt. Visibilidad Web UNAM UNAM. https://www.visibilidadweb.unam.mx/sites/default/files/recursos/2020-06/SVW_GuiaTecnicaSitiosWeb_Alt.pdf
Documento elaborado por: L.C.G. Miguel Ángel Islas Flores.
Revisado por: L.C. Irene G. Sánchez García MATIE y Juan Manuel Castillejos Reyes.
Ciudad Universitaria, abril de 2020.