Generador de texto alternativo
Las etiquetas ALT o atributos ALT son el «texto alternativo» de una imagen. Las etiquetas ALT se utilizan para describir la imagen o lo que ésta representa. Uno de los principales objetivos de las etiquetas ALT es beneficiar a los usuarios con problemas de visión que utilizan lectores de pantalla cuando navegan. Las etiquetas ALT también se utilizan para aquellos que navegan por la web con las imágenes desactivadas o para los usuarios que tienen navegadores de sólo texto. Como ocurre con muchos aspectos específicos de los sitios web, las etiquetas ALT también desempeñan un papel en el SEO. Las etiquetas ALT ayudan a los motores de búsqueda a asociar las imágenes con el contenido de una página web para que puedan indexarlas correctamente en sus resultados de búsqueda. Las etiquetas ALT también ayudan a los motores de búsqueda a determinar los mejores resultados cuando un usuario busca imágenes.
Las etiquetas ALT deben ser descriptivas y útiles. Las etiquetas ALT deben contener suficiente información para que las personas que no pueden ver las imágenes entiendan lo que éstas representan. Cuando escriba sus etiquetas ALT, pregúntese si entendería la relevancia de la etiqueta ALT si no pudiera ver la imagen.
Aunque las etiquetas ALT deben ser descriptivas, también deben ser breves. No deben ser frases o párrafos completos. Con un límite de unos 125 caracteres, una etiqueta ALT debe proporcionar suficientes detalles para que los usuarios y los motores de búsqueda relacionen la imagen con el contexto de la página.
Etiqueta de imagen Html
El texto alternativo (Alt) sirve para transmitir el «por qué» de la imagen en relación con el contenido de un documento o página web. El software de lectura de pantalla lo lee en voz alta para los usuarios y los motores de búsqueda lo indexan. También aparece en la página si la imagen no se carga, como en este ejemplo de una imagen perdida.
Imágenes como enlaces: Si la imagen se utiliza para enlazar con otra página, el texto alternativo debe describir lo que sucederá cuando se haga clic en la imagen (en lugar de su aspecto). Por ejemplo, el texto alternativo de una imagen de un signo de interrogación que enlaza con una página de ayuda debería ser «Contacte con el servicio de asistencia» en lugar de «signo de interrogación».
Imágenes con información compleja: Si la imagen es un gráfico, un diagrama o una ilustración, considere cómo transmitir la información contenida en la imagen utilizando tanto el texto alternativo como el texto de la página adyacente. Vea un ejemplo de infografía accesible de WebAIM.
Algunas personas entienden mejor la información compleja cuando se presenta de forma visual, como un gráfico o un diagrama, mientras que otras consideran que les conviene más leer la información. Para las personas que utilizan lectores de pantalla, un buen equivalente textual de la información presentada gráficamente es esencial para su comprensión.
Alt-text beispiele
El retoLas personas ciegas suelen utilizar lectores de pantalla o dispositivos Braille que «leen» el texto de las páginas web. Cuando estos dispositivos encuentran un elemento no textual que no tiene un texto «alt» asociado, el usuario no tiene forma de saber qué representa el elemento o si es importante para el contenido de la página. Proporcione descripciones de texto de los elementos no textuales de una página para comunicar el significado del elemento al usuario. Añadir texto alternativo a los elementos no textuales también ayuda a las personas que utilizan navegadores parlantes, navegadores de texto o navegadores en dispositivos pequeños.
Atributo Html img title
SVG sigue siendo el formato recomendado para las imágenes que deben ser dibujadas con precisión en diferentes tamaños.Errores de carga de imágenesSi se produce un error durante la carga o la representación de una imagen, y se ha establecido un controlador de eventos onerror en el evento de error, ese controlador de eventos será llamado. Esto puede ocurrir en un número de situaciones, incluyendo:
Omitir alt por completo indica que la imagen es una parte clave del contenido y no hay un equivalente textual disponible. Establecer este atributo a una cadena vacía (alt=»») indica que esta imagen no es una parte clave del contenido (es una decoración o un píxel de seguimiento), y que los navegadores no visuales pueden omitirla de la representación. Los navegadores visuales también ocultarán el icono de la imagen rota si el alt está vacío y la imagen no se muestra.
Indica si la obtención de la imagen debe realizarse mediante una solicitud CORS. Los datos de la imagen de una imagen habilitada para CORS devuelta desde una solicitud CORS pueden reutilizarse en el elemento <canvas> sin que se marquen como «manchados».
Si no se especifica el atributo crossorigin, se envía una solicitud no CORS (sin la cabecera de solicitud Origin), y el navegador marca la imagen como contaminada y restringe el acceso a sus datos de imagen, impidiendo su uso en elementos <canvas>.