 |
El atributo alt es el atributo HTML utilizado en documentos HTML y XHTML para especificar texto alternativo ( texto alt ) que se va a representar cuando el elemento al que se aplica no se puede representar.
El software "lector de pantalla" utiliza el atributo alt para que una persona que esté escuchando el contenido de una página web (por ejemplo, una persona ciega) pueda interactuar con este elemento. Cada imagen debe tener un atributo alt para que sea accesible, pero no es necesario que contenga texto. Puede ser un atributo vacío o nulo: alt="". [1]
El atributo se introdujo en HTML 2 [2] y en HTML 4.01 era necesario para las etiquetasimg y . [3] Es opcional para la etiqueta y la etiqueta obsoleta .area input applet
Ejemplo
Aquí hay una imagen para la cual el atributo alt es "En el cielo ondea una bandera roja con una cruz blanca cuya barra vertical se desplaza hacia el asta de la bandera".
El HTML de esta imagen podría ser similar a lo siguiente:
< img alt = "En el cielo ondea una bandera roja con una cruz blanca cuya barra vertical se desplaza hacia el asta de la bandera". src = "http://upload.a.org/wikipedia/commons/thumb/8/83/Dannebrog.jpg/180px-Dannebrog.jpg" >
Un lector con discapacidad visual que utilice un lector de pantalla como Orca escuchará el texto alternativo en lugar de la imagen. Un navegador de texto como Lynx mostrará el texto alternativo en lugar de la imagen. Un navegador gráfico generalmente mostrará solo la imagen y mostrará el texto alternativo solo si el usuario le pide que muestre las propiedades de la imagen o si ha configurado el navegador para que no muestre imágenes, o si el navegador no pudo recuperar o decodificar la imagen. .
Un valor de atributo alternativo sería "La bandera danesa".
Conceptos erróneos comunes
El altatributo no siempre tiene que describir literalmente el contenido de la imagen. Tenga en cuenta el propósito y el contexto de la imagen y lo que sería útil para alguien que no puede verla. Se supone que el atributo alt es una alternativa para la imagen, por lo general indica su propósito. Por ejemplo, una imagen de una señal de advertencia no debe tener un texto alternativo "un triángulo con un fondo amarillo, un borde negro y un signo de exclamación", sino simplemente "¡Advertencia!", A menos que, por supuesto, el propósito de la imagen sea mostrar lo que el símbolo de advertencia en realidad se parece a.
Internet Explorer 7 y versiones anteriores representan el texto en atributos alt como texto de información sobre herramientas , que no cumple con los estándares. [4] [5] Este comportamiento llevó a muchos desarrolladores web a hacer un mal uso de alt cuando deseaban mostrar información sobre herramientas que contenía información adicional sobre imágenes, [6] en lugar de utilizar el titleatributo que estaba destinado a ese uso. [7] A partir de Internet Explorer 8, los atributos alt ya no se muestran como información sobre herramientas. [8]
El atributo alt se denomina comúnmente, pero incorrectamente, "etiqueta alt". [5] [9] [10]
Imágenes decorativas
El W3C recomienda que las imágenes que no transmiten información, pero que son puramente decorativas, se especifiquen en CSS en lugar de en el marcado HTML. [11] Sin embargo, a veces puede ser necesario incluir una imagen decorativa como imgetiqueta HTML . En este caso, si la imagen realmente no se agrega al contenido, entonces se debe incluir un atributo alt en blanco con el formato alt="". Esto hace que la página sea navegable para usuarios de lectores de pantalla o navegadores no gráficos. Si (incumpliendo el estándar) no se ha proporcionado ningún atributo alt, los navegadores que no pueden mostrar la imagen seguirán mostrando algo allí, por ejemplo, la URL de la imagen o una cadena de texto fija.
Ver también
longdescatributo
Notas
- ^ "Texto alternativo" , WebAIM, última actualización el 3 de septiembre de 2015.
- ^ "Lenguaje de marcado de hipertexto - 2.0" . Consorcio World Wide Web .
- ^ "13 objetos, imágenes y applets" . Consorcio World Wide Web . 24 de diciembre de 1999.
- ^ "¿Por qué Mozilla no muestra mis sugerencias alternativas?" . Archivado desde el original el 15 de octubre de 2008 . Consultado el 22 de julio de 2009 .
- ↑ a b Anne van Kesteren (16 de diciembre de 2004). "Atributo alt (etiqueta alt, información sobre herramientas alt)" . Consultado el 22 de julio de 2009 .
- ^ Error 25537: el texto alternativo no se muestra como información sobre herramientas sobre <img> , Mozilla bugzilla
- ^ W3C HTML WG (24 de diciembre de 1999). "7.4.3 El atributo de título" . Especificación HTML 4.01 . W3C . Consultado el 22 de julio de 2009 .
- ^ "Novedades de Internet Explorer 8 - Accesibilidad y ARIA" . MSDN . Microsoft. Archivado desde el original el 28 de febrero de 2009 . Consultado el 22 de julio de 2009 .
- ^ Roger Johansson (7 de noviembre de 2005). "Es un atributo alt, no una etiqueta alt" . Calle Berea 456 . Archivado desde el original el 8 de junio de 2009 . Consultado el 22 de julio de 2009 .
- ^ Tommy Olsson (20 de julio de 2004). "Etiquetas alternativas" . El cuco autista . Archivado desde el original el 25 de diciembre de 2007 . Consultado el 22 de julio de 2009 .
- ^ W3C. "Contenido incrustado - HTML 5" .
Referencias
- Incluir una imagen: el IMGelemento (especialmente, Cómo especificar texto alternativo ) de la especificación HTML 4.01
- El imgelemento (especialmente, Requisitos para proporcionar texto para actuar como una alternativa para las imágenes ) de la especificación HTML 5
- Técnicas para WCAG 2.0 (especialmente, H37: Uso de altatributos en imgelementos )
- Proporcionar equivalentes de texto para imágenes de Dive Into Accessibility
- Uso apropiado de texto alternativo de WebAIM
- Directrices sobre textos alternativos en imgelementos de Jukka Korpela
- Texto alternativo para imágenes: el atributo alt de Estelle Weyl
- Mini preguntas frecuentes sobre el texto alternativo de las imágenes de Ian Hickson
Enlaces externos
- Bookmarklets útiles para la gestión de atributos alt [1] [2]
