Skip to main content

Aprenda acerca de HTML Alt Attribute Image Tags

Curso de HTML 5 para INICIANTES - IMAGENS #09 - img, src, figure, figcaption, width, height, alt (Junio 2026)

Curso de HTML 5 para INICIANTES - IMAGENS #09 - img, src, figure, figcaption, width, height, alt (Junio 2026)
Anonim

Una de las formas más simples de hacer que su sitio web sea más accesible es usar un atributo alt en sus etiquetas de imagen. Es sorprendente para mí cuánta gente se olvida de usar este atributo simple. De hecho, ahora, si desea escribir XHTML válido, se requiere el atributo alt para la etiqueta img. Y sin embargo la gente todavía no lo hace.

El atributo ALT

El atributo alt es un atributo de la etiqueta img y está destinado a ser un alt Es necesario para los navegadores no visuales cuando se encuentran con imágenes. Esto significa que el texto debe usarse cuando la imagen no está visible en la página. En cambio, lo que se muestra (o se lee) es el texto alternativo.

Muchos navegadores también muestran el texto alternativo cuando el cliente apoya el mouse sobre la imagen. Esto significa que el texto debe ser claro y fácil de leer y no crear una enorme pesadilla emergente para cualquier lector que haga una pausa con el mouse en su página. Agregar texto alternativo es simple, simplemente use el atributo alt en su imagen. Aquí hay algunos consejos para escribir etiquetas alt:

Ser breve

Algunos navegadores realmente se romperán si el texto alternativo es demasiado largo. Y si bien puede parecer agradable describir qué hay exactamente en la imagen, ese no es el propósito de la etiqueta alt. En su lugar, se debe llenar exactamente con las palabras necesarias para poner la imagen en contexto y no más.

Se claro

No seas tan breve que el contexto sea confuso. Recuerde, algunas personas SOLO verán el texto en sus etiquetas alt, por lo que si son demasiado breves, es posible que no entiendan lo que usted está tratando de mostrarles. Por ejemplo:

  • Un arbol: bueno
  • Un sicomoro: mejor
  • Un árbol sicómoro de 10 pies de altura con hojas en su mayoría marrones y posiblemente algo malo con su corteza: demasiado

Ser contextual

No describas la imagen si está diseñada para ser vista en contexto. Por ejemplo: si tiene una imagen del logotipo de la empresa, debe escribir "Nombre de la empresa" y no "Logotipo de la empresa".

No muestre el funcionamiento interno de su sitio

Si está colocando imágenes espaciadoras, solo use un espacio para el texto alternativo. Si escribe "spacer.gif", solo llama la atención sobre el sitio, en lugar de proporcionar información útil. Y técnicamente, si está tratando de escribir XHTML válido, debe usar CSS en lugar de imágenes espaciadoras, por lo que también podría dejar el texto alternativo fuera de esas imágenes.

Sé consciente del motor de búsqueda

Si tiene un texto alternativo bueno, conciso, claro, que realmente puede ayudar a su posicionamiento en los motores de búsqueda, ya que las imágenes en su página promueven y mejoran sus palabras clave.

No lo use solo para la optimización de motores de búsqueda

Muchos sitios piensan que si usan el texto alternativo como una herramienta de SEO, pueden "engañar" a los motores de búsqueda para que optimicen su sitio para una palabra clave que no tienen. Sin embargo, esto puede ser contraproducente si el motor de búsqueda decide que está intentando falsificar sus resultados y lo elimina por completo.