el atributo alt se utiliza para asignar una alternativa de texto a un img. El texto alternativo se utiliza cada vez que la imagen no se representa y por tecnologías de asistencia como lectores de pantalla. Además, los motores de búsqueda que ofrecen capacidades de búsqueda basadas en imágenes dependen del texto alt para determinar el significado de las imágenes., Proporcionar valores alt para las imágenes realmente no es opcional, es algo que absolutamente debe hacer si es un diseñador, desarrollador o webmaster. Sin embargo, usar el atributo alt correctamente es tan importante como usarlo en primer lugar.
pautas para el uso adecuado de texto alternativo
cuando se utiliza correctamente, las alternativas de texto para elementos visuales significan que los usuarios que no pueden ver imágenes pueden hacer uso de la funcionalidad completa de un sitio web. Sin embargo, cuando las alternativas de texto no se utilizan correctamente, pueden crear confusión., Siga estas sencillas reglas para proporcionar a los visitantes de su sitio web la mejor experiencia posible.
siempre proporcione texto alternativo
puede parecer innecesario decir esto, pero siempre debe agregar el alt atribuido a cada imagen que use en una página web. Incluso en algunos casos especiales donde no se proporciona texto, el atributo alt debería estar presente y dejarse en blanco.,
ayuda a los lectores de pantalla a omitir imágenes estéticas
Cuando un lector de pantalla Encuentra una imagen sin el atributoalt simplemente le dirá al visitante del sitio web «imagen». Esto deja al visitante preguntándose qué información puede faltar. Sin embargo, si el atributo de texto alternativo está presente pero se deja vacío, como esto alt="", el lector de pantalla entiende que la imagen debe omitirse por completo. Utilice este conocimiento para indicar a las tecnologías de asistencia, como los lectores de pantalla, qué imágenes deben omitir., Si tiene imágenes que se proporcionan exclusivamente con fines de diseño o estéticos, como una imagen utilizada para representar una barra horizontal, proporcione un atributo de texto alternativo vacío para que las tecnologías de asistencia sepan que deben ignorar la imagen por completo.
duplicar el mensaje transmitido por la imagen
¿Qué información transmite la imagen? Encapsule esa información en una breve declaración y úsela como alternativa de texto., El objetivo del texto alt es transmitir exactamente el mismo significado a un visitante que no puede ver una imagen que la imagen misma transmite a un visitante que puede verla. En los casos en que la imagen proporciona información textual, Simplemente proporcione el mismo texto que el texto alt.
indique a los visitantes dónde van las imágenes enlazadas
Las imágenes se utilizan a menudo como enlaces a otros sitios web. Puede ser el caso de que esté utilizando imágenes de botón para enlaces, o simplemente puede vincular una imagen en un artículo a la fuente de la imagen., Si está vinculando imágenes a otros sitios web, use el texto alternativo de imagen para indicar a los usuarios dónde va el enlace.
casos especiales
siguiendo las pautas anteriores, estarás proporcionando mejores alternativas de texto que muchos sitios web comunes. Si bien estas pautas cubrirán la gran mayoría de las necesidades de texto alternativo, hay algunos casos especiales que debe tener en cuenta.
Use 125 caracteres o menos
muchas tecnologías de asistencia procesan texto en trozos de 125 caracteres. Mejore la experiencia de los usuarios de lectores de pantalla limitando su texto alternativo a 125 caracteres., Si no puede recortar el texto alt a menos de 125 caracteres, proporcione una descripción ampliada en una página separada y vincule a ella. Por ejemplo, si tiene una imagen de un diagrama que no se puede resumir en menos de 125 caracteres, asigne a la imagen un texto alternativo corto como «diagrama de algo impresionante» (pero en realidad dígale al visitante qué cosa impresionante se muestra en el diagrama)., Hay dos maneras diferentes de complementar el texto alternativo corto con una descripción extendida que proporciona mucho más detalle:
- inmediatamente debajo de la imagen, inserte un enlace que diga algo como descripción extendida del diagrama impresionante y enlace a una página separada con una descripción extendida.
- inmediatamente debajo o al lado de la imagen agregue una letra D mayúscula y enlácela a la descripción extendida en una página separada. Este Enlace se llama D-Link y algunos expertos en Accesibilidad abogan por su uso, pero preferimos y recomendamos el método descrito anteriormente.,
otra forma de proporcionar una descripción extendida en el pasado era hacer uso del atributo longdesc. Sin embargo, debe saber que ha sido obsoleto en HTML5, y ya no es una buena manera de proporcionar una descripción extendida. Skip longdesc y utilice uno de los dos métodos descritos anteriormente para proporcionar una descripción ampliada de una imagen compleja.
proporcione un breve resumen para las imágenes que ya se han descrito
habrá momentos en los que utilizará una imagen y la describirá en el texto del párrafo en la página., Por ejemplo, usted puede publicar una imagen de un viaje de pesca reciente e incluir en el texto del párrafo en la página una descripción de la imagen que es algo como esto «tuve un gran tiempo de pesca este fin de semana pasado y cogió el bajo de 7 libras que se ve en la imagen!»En un caso como este, sigue siendo importante proporcionar una alternativa de texto a la imagen, pero el texto utilizado puede ser muy corto. En el caso de nuestro ejemplo de pesca, el texto bueno alt podría verse algo como esto: alt="weekend fishing trip".,
puntos para recordar
El uso adecuado del atributo alt se puede resumir con cuatro puntos clave:
- siempre use el atributo
alt, incluso si lo deja en blanco. - Mantenga el texto alternativo breve.
- Duplicar la información transmitida por la imagen.
- Dile a los visitantes dónde van las imágenes enlazadas.
ahora sabe lo importante que es proporcionar una alternativa de texto para cada imagen en su sitio web. Mejor aún, usted sabe cómo utilizar el texto alternativo correctamente para que sea lo más eficaz posible.,
Deja una respuesta