atributo alt

El atributo `alt` es un atributo HTML que se utiliza en documentos HTML y XHTML para especificar un texto alternativo ( texto alt ) que se mostrará en lugar de un elemento que no se puede renderizar. El atributo `alt` se usa para descripciones breves, mientras que para descripciones más largas se usa el atributo `longdesc` . El Consorcio World Wide Web (W3C), organismo de estandarización de la World Wide Web , recomienda que todas las imágenes mostradas en HTML tengan un atributo `alt`, aunque este no necesita contener texto. La falta de atributos `alt` adecuados en las imágenes de los sitios web ha dado lugar a varias demandas relacionadas con la accesibilidad.

El atributo `alt` se utiliza para mejorar la accesibilidad y la experiencia del usuario, incluso para personas con discapacidad visual que dependen de software especializado para navegar por internet. El uso del atributo `alt` para imágenes en HTML forma parte de las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C. Los lectores de pantalla y los navegadores web basados ​​en texto leen el atributo `alt` en lugar de la imagen. El texto dentro del atributo `alt` sustituye a la imagen al copiarlo y pegarlo como texto, lo que facilita la lectura automática de las imágenes y mejora el posicionamiento en buscadores (SEO).

El atributo se introdujo por primera vez en el borrador de HTML 1.2 en 1993 para brindar soporte a los navegadores basados ​​en texto. ^{[ 1 ]} En HTML 4.01 , que se publicó en 1999, el atributo se convirtió en un requisito para las etiquetas img y area . ^{[ 2 ]} Es opcional para la etiqueta input y la etiqueta applet obsoleta . ^{[ 3 ]}

Internet Explorer 7 y versiones anteriores muestran el texto de los atributos alt como texto de información sobre herramientas , lo cual no cumple con los estándares HTML del Consorcio World Wide Web (W3C). ^{[ 4 ]} Este comportamiento llevó a muchos desarrolladores web a usar incorrectamente el atributo alt cuando deseaban mostrar información sobre herramientas con información adicional sobre imágenes, en lugar de usar el atributo title, que estaba destinado para ese uso. ^{[ 5 ] [ 6 ]} A partir de Internet Explorer 8 , lanzado en 2009, los atributos alt ya no se muestran como información sobre herramientas en Internet Explorer. ^{[ 7 ]}

El texto del atributo alt se utiliza para reemplazar la imagen cuando esta no se puede cargar, sin alterar el significado previsto del contenido de la página. ^{[ 8 ]} Las directrices de accesibilidad del contenido web del W3C establecen que el atributo alt se utiliza para transmitir el significado y la intención de la imagen, en lugar de ser una descripción literal de la misma. ^{[ 9 ]} Por ejemplo, un atributo alt para una imagen del logotipo de una institución debe indicar que se trata del logotipo de la institución, en lugar de describir detalles sobre su apariencia. ^{[ 10 ] [ 11 ]} El atributo alt está diseñado para proporcionar descripciones breves y concisas de la imagen. Se pueden ofrecer descripciones más extensas mediante el atributo longdesc, que proporciona información más detallada y complementa, pero no reemplaza, el atributo alt. ^{[ 2 ]}

Un lector de pantalla como Orca leerá el texto alternativo en lugar de la imagen. ^{[ 12 ]} Un navegador web basado en texto como Lynx mostrará el texto alternativo en lugar de la imagen (o mostrará el atributo de valor si la imagen es un botón clicable ). ^{[ 13 ]} Un navegador gráfico normalmente mostrará solo la imagen y mostrará el texto alternativo solo si el usuario ve las propiedades de la imagen, o ha configurado el navegador para que no muestre imágenes, o si el navegador no pudo recuperar o decodificar la imagen. ^{[ 14 ]}

El uso de descripciones en el atributo alt mejora la optimización para motores de búsqueda y permite que los motores de búsqueda específicos de imágenes, como Google Imágenes , busquen y muestren imágenes relevantes que se utilizan en sitios web en los resultados de búsqueda. ^{[ 15 ]} Para los resultados de búsqueda que no son imágenes, el texto dentro del atributo alt es leído por los motores de búsqueda de la misma manera que el texto normal de la página. ^{[ 16 ]}

El W3C recomienda que las imágenes que no transmiten información, sino que son puramente decorativas, se especifiquen en CSS en lugar de en el marcado HTML. Si las imágenes decorativas se renderizan usando HTML que no agregan contenido ni proporcionan información adicional, entonces el W3C recomienda que se incluya un atributo alt vacío en el formato alt="". ^{[ 17 ]} Esto hace que la página sea más navegable para los usuarios de lectores de pantalla o navegadores no gráficos al omitir las imágenes que no transmiten ningún significado. Si no se ha proporcionado un atributo alt, entonces los navegadores que no pueden mostrar la imagen no la ignorarán, sino que leerán o mostrarán la URL u otro marcador de identificación. ^{[ 18 ]} Esto crea ambigüedad ya que el usuario generalmente no puede determinar a partir de una simple lectura de una URL si la imagen es relevante para el texto o si es un elemento puramente decorativo de la página web. ^{[ 19 ]} Una auditoría de Google Lighthouse de 2021 mostró que el 27% de los atributos de texto alt auditados estaban vacíos, a pesar de que la mayoría de esas imágenes eran imágenes informativas no decorativas. ^{[ 20 ]}

Ha habido muchas demandas sobre la accesibilidad de los sitios web y la falta de atributos alt adecuados en los sitios web. ^{[ 18 ]} Maguire v Sydney Organising Committee for the Olympic Games fue una demanda de 2000 en la que un hombre ciego en Australia demandó al Comité Organizador de los Juegos Olímpicos de Sídney porque su sitio web www.olympics.com no era accesible para él debido a la falta de atributos alt en las imágenes. ^{[ 21 ]} La Comisión Australiana de Derechos Humanos dictaminó que el sitio web lo había discriminado por no ajustarse a los estándares de accesibilidad que permiten a las personas ciegas navegar por los sitios web. ^{[ 22 ]} Durante la demanda, los gobiernos de la Commonwealth, los estados y los territorios australianos emitieron una declaración conjunta a través del Departamento de Banda Ancha, Comunicaciones y Economía Digital en la que anunciaban que adoptarían las directrices de accesibilidad del W3C para todos los sitios web .gov.au. ^{[ 23 ]}

En Estados Unidos, se han presentado varias demandas de alto perfil relacionadas con la falta de atributos alt en imágenes que citan una violación de la Ley de Estadounidenses con Discapacidades (ADA). ^{[ 24 ]} El Departamento de Justicia de Estados Unidos cita la falta de atributos alt como un ejemplo de barrera para la accesibilidad de los sitios web. ^{[ 25 ]} La demanda colectiva National Federation of the Blind v. Target Corp. de 2006 alegó que Target.com violó la ADA porque las imágenes no usaban atributos alt. ^{[ 26 ]} Esta demanda sentó un precedente legal en Estados Unidos para la accesibilidad de los sitios web y el cumplimiento de la ADA. ^{[ 27 ]}

• Uso apropiado del texto alternativo de WebAIM
• Mini-FAQ sobre el texto alternativo de las imágenes de Ian Hickson