Atributo alt del HTML <img>
Definición y uso
Texto alternativo El atributo es un atributo obligatorio que especifica el texto alternativo que se muestra cuando la imagen no se puede mostrar.
Supongamos que el usuario no puede ver la imagen por las siguientes razones, el atributo alt puede proporcionar información alternativa para la imagen:
- Velocidad de conexión lenta
- Error en el atributo src
- El navegador ha desactivado las imágenes
- El usuario está utilizando un lector de pantalla
El atributo alt del etiqueta <img> especifica el texto alternativo que se muestra en el navegador en lugar de la imagen cuando la imagen no se puede mostrar o cuando el usuario desactiva la visualización de imágenes.
Recomendamos encarecidamente que utilice esta propiedad en cada imagen del documento. De esta manera, incluso si la imagen no se puede mostrar, el usuario aún puede ver información sobre lo que se ha perdido. Además, para las personas con discapacidades, el atributo alt es a menudo la única manera de entender el contenido de la imagen.
Consejo:Si necesita crear una herramienta de sugerencias para la imagen, utilice Atributo title¡!
Consejos y notas
Nota:Texto alternativo El valor del atributo es una cadena de caracteres que puede contener hasta 1024 caracteres, incluyendo espacios y puntuación. Esta cadena debe estar entre comillas. Este texto alt puede contener referencias a caracteres especiales, pero no permite otros tipos de etiquetas, especialmente etiquetas de estilo.
Nota:Cuando el usuario mueve el ratón sobre el elemento img, Internet Explorer mostrará el valor del atributo alt. Este comportamiento no es correcto. Todos los demás navegadores están acercándose a la norma, mostrando el texto alternativo solo cuando la imagen no se puede mostrar.
Consejo:Si necesita crear una herramienta de sugerencias para la imagen, utilice Atributo title。
Ejemplo
Ejemplo 1
<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />
Si no se puede mostrar la imagen, el navegador mostrará el texto alternativo, como por ejemplo:
Además, cuando el usuario mueve el ratón sobre la imagen, los navegadores más recientes mostrarán un texto descriptivo en una caja de texto. El siguiente código agrega texto descriptivo a la propiedad alt de la imagen:
Puede mover el ratón sobre la siguiente foto para ver el efecto correspondiente:
El cuadro de texto en rojo es el efecto que muestra el navegador IE7 cuando el usuario mueve el ratón sobre la imagen:
Ejemplo 2
Se especificó la imagen con texto alternativo:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Sintaxis
<img alt="Texto">
Valor de atributo
| Valor | Descripción |
|---|---|
| Texto |
Define el texto alternativo de la imagen. Principios de uso del texto alt:
|
Compatibilidad con navegadores
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Soporte | Soporte | Soporte | Soporte | Soporte |
