En este artículo, veremos cómo el texto alternativo puede ser útil para proporcionar metadatos relacionados con las imágenes en caso de que la imagen no se cargue correctamente. La razón por la que no se carga correctamente puede deberse a una conexión a Internet lenta, las imágenes se eliminan de la página web, la ruta absoluta de la imagen no se ha proporcionado o tal vez algunos problemas técnicos en el sitio, etc. El texto alternativo, a veces también conocido como atributo alt en HTML, proporciona los metadatos relacionados con esa imagen específica. El atributo alt se puede usar con la etiqueta input>, la etiqueta <area> y la etiqueta <img>. Este texto alternativo aparece cuando falla la carga de la imagen. Esto da la idea acerca de esa imagen específica.
Sintaxis:
<img src="url" alt="text"/>
Valor de atributo: contiene texto de valor único que se utiliza para especificar el texto alternativo para el elemento compatible si no se muestra una imagen.
Ejemplo 1: en este ejemplo, la ruta de la imagen contiene la imagen junto con el texto alternativo, por lo que mostrará la imagen.
HTML
<!DOCTYPE html> <html> <head> <title>Alternative Text</title> </head> <body> <p>Image loaded</p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210825232132/gfg.png" alt="Must Do Coding Questions for Companies like Amazon, Microsoft, Adobe" /> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, veremos cuándo falta el texto alternativo y la imagen no se pudo cargar.
HTML
<!DOCTYPE html> <html> <head> <title>Alternative Text</title> </head> <body> <p>Image failed to load and alt text is missing</p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210825232132/gfg.png" /> </body> </html>
Salida: aquí, no proporcionamos el enlace de ruta absoluta correcto para la imagen y tampoco proporcionamos ninguna información relacionada con la imagen.
Ejemplo 3: en este ejemplo, veremos cuándo se agrega el texto alternativo y la imagen no se pudo cargar.
HTML
<!DOCTYPE html> <html> <head> <title>Alternative Text</title> </head> <body> <p>Image failed to load having alt text</p> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/2021082523213/gfg.png" alt="Must Do Coding Questions for Companies like Amazon, Microsoft, Adobe" /> </body> </html>
Salida: Aquí, no proporcionamos el enlace de la ruta absoluta correcta para la imagen, pero proporcionamos el texto alternativo.
Usos del texto alternativo:
- El primer y más básico uso de texto alternativo es proporcionar los metadatos, es decir, una descripción de la imagen. Si una imagen no se carga o tarda en cargarse, este texto aparecerá para el usuario.
- Para los motores de búsqueda, como Google, Bing, hay una pestaña separada de imágenes y están rastreando cada página web para encontrar las imágenes relevantes para cada palabra clave. Entonces, en lugar de leer imágenes de cada página web, lo cual es difícil para ellos, usan texto alternativo para comprender lo que muestra la imagen. Por lo tanto, debido al texto alternativo, es fácil que los motores de búsqueda rastreen y clasifiquen mejor su sitio web.
- Hay algunas personas que tienen problemas de visión y no pueden leer páginas web. Por lo tanto, utilizan un lector de pantalla, los lectores de pantalla leen todo el contenido excepto las imágenes. Entonces, para las imágenes, el texto alternativo ayuda a las herramientas de lectura de pantalla a describir imágenes, y las personas pueden tener una idea sobre esa imagen específica.