El atributo ALT es un elemento esencial en HTML que permite agregar una descripción textual a las imágenes. Su función principal es mejorar la accesibilidad, permitiendo que los lectores de pantalla describan el contenido visual a usuarios con discapacidad visual.
En este artículo, veremos qué es el atributo ALT, su importancia, cómo implementarlo correctamente y las mejores prácticas para optimizarlo
Qué es el atributo ALT
El atributo ALT (abreviatura de «alternative text» o «texto alternativo») es un atributo HTML que se usa dentro de la etiqueta <img> para proporcionar una descripción textual de una imagen. Fue diseñada con el objetivo de ofrecer un contexto cuando la imagen no se puede cargar o cuando un usuario con discapacidad visual usa un lector de pantalla para navegar por la web.
En lo que al código se refiere, la sintaxis básica del atributo ALT en HTML es la siguiente:
<img src="imagen.jpg" alt="Descripción de la imagen" title="Título de la imagen">
Importancia del atributo ALT
El atributo ALT no sólo mejora la accesibilidad web, sino que también ayuda a los motores de búsqueda a comprender el contenido de las imágenes, lo que beneficia de manera directa al SEO o posicionamiento orgánico.
En total, este atributo HTML cumple 3 objetivos principales.
Beneficia el SEO y la indexación en buscadores
Los motores de búsqueda, como Google, no pueden «ver» imágenes como lo haría un usuario. En su lugar, analizan el atributo ALT para comprender su contenido y clasificar las imágenes en los resultados de búsqueda.
Por lo tanto, un buen uso del ALT mejora el posicionamiento en Google Imágenes y puede atraer tráfico orgánico adicional a una web. Además, contribuye al SEO general de la página, ya que Google valora la accesibilidad y la optimización semántica.
Aunque sobre este punto, consideramos necesario matizar algo que recalcó recientemente Sergio Canales en su podcast, pues el propio John Muller (uno de los principales portavoces de Google en temas de SEO) ha quitado importancia a este aspecto en una respuesta dada en la red social Bluesky, indicando que no debería ser una decisión principal de cara al SEO.
Mejora la accesibilidad web
Como ya se ha comentado, uno de los propósitos principales del atributo ALT es hacer que las páginas web sean más accesibles para personas con discapacidades visuales. Los lectores de pantalla utilizan este texto alternativo para describir imágenes a los usuarios, permitiéndoles comprender el contenido visual sin necesidad de verlo.
<img src="grafico-ventas.jpg" alt="Gráfico que muestra el aumento del 20% en ventas" title="Grafico de ventas">
Mejora la experiencia del usuario
Finalmente, el texto alternativo de una imagen ayuda a mejorar el UX (User Experience). Cuando una imagen no se carga debido a un error técnico o a una conexión lenta, el texto del ALT aparece en su lugar. Esto permite a los usuarios entender qué contenido debería estar allí sin afectar negativamente su experiencia de navegación.
Es decir, si un ecommerce tiene imágenes de productos con errores de carga, un ALT bien escrito puede evitar que los usuarios abandonen la página sin saber qué estaban viendo.
Cómo implementar el atributo ALT en HTML
Agregar el atributo ALT en HTML es sencillo ya que se tiene que incluir dicho atributo en la etiqueta IMG del código HTML.
<img src="playa-paraiso.jpg" alt="Playa de arena blanca con aguas cristalinas en el Caribe">
Cómo ver el ALT en el código
Para ver el atributo alternativo sobre el código, basta con inspeccionar la imagen en cuestión y buscar dicho valor dentro de dicha etiqueta.
También se puede encontrar esta etiqueta HTML si accedemos al código fuente de la página. Algo que conseguimos si escribimos el comando “view-source:”
Por ejemplo view-source:https://miweb.com
Mejores prácticas para redactar textos alternativos
Aunque el texto alternativo está enfocado en describir una imagen, existen una serie de buenas prácticas que pueden mejorar tanto la accesibilidad como las opciones de aparecer en los resultados de búsqueda de Google imágenes:
● Sé descriptivo y preciso: Explica el contenido de la imagen de forma clara y concisa. Ejemplo: «Hombre corriendo en un parque al amanecer» en lugar de «Persona haciendo ejercicio».
● No uses «imagen de» o «foto de»: Los lectores de pantalla ya indican que es una
imagen, así que no es necesario.
● Incluye palabras clave de forma natural: Si es relevante para el contenido y el SEO, integra una palabra clave sin forzarla. Ejemplo: «Zapatillas de running Nike Air Zoom negras» en lugar de «Zapatillas deportivas negras baratas oferta».
● Evita el relleno de palabras clave (keyword stuffing): No abuses de las keywords solo por intentar posicionar mejor en Google. Esto puede perjudicar la accesibilidad y la experiencia del usuario.
● Si la imagen es decorativa, usa alt=»»: Si la imagen no aporta información relevante, el ALT debe estar vacío para que los lectores de pantalla la ignoren.
● Describe la función en imágenes de botones o enlaces: Usa un ALT que explique la acción que realiza el usuario. Ejemplo: «Ver catálogo de productos» en lugar de «Botón verde».
● En gráficos y diagramas, resume la información clave: Si la imagen contiene datos importantes, describe la conclusión principal. Para información más detallada, usa una descripción en el texto de la página.
● Usa menos de 125 caracteres: Los lectores de pantalla suelen cortar el texto alternativo después de esta longitud, así que mantén la descripción breve pero efectiva.
● No repitas información que ya está en el texto cercano: Si la imagen ilustra algo que ya está explicado en el contenido, evita duplicar la misma información en el ALT.
● Si hay texto dentro de la imagen, inclúyelo en el ALT: Si la imagen contiene texto importante (por ejemplo, un gráfico con etiquetas), asegúrate de incluirlo en el ALT o en el contenido de la página.