Alternativas de texto para imágenes

Usa el atributo alt para proporcionar alternativas de texto para las imágenes

Alice Boxhall

Dave Gash

Meggin Kearney

Las imágenes son un componente importante de la mayoría de las páginas web y, por supuesto, un punto problemático en particular para los usuarios con visión reducida. Debemos considerar el rol que cumple una imagen en una página para determinar qué tipo de alternativa de texto debe tener. Observa esta imagen.

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500>.<jpg">;
/article

Un estudio muestra que 9 de cada 10 gatos juzgan en silencio a sus dueños mientras duermen

En la página, hay una foto de un gato que ilustra un artículo sobre el comportamiento de juicio bien conocido de los gatos. Un lector de pantalla anunciará esta imagen con su nombre literal, "/160204193356-01-cat-500.jpg". Es exacto, pero no es útil en absoluto.

Puedes usar el atributo alt para proporcionar una alternativa de texto útil a esta imagen, por ejemplo, "Un gato que mira amenazadoramente al espacio".

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly >off into space"

Luego, el lector de pantalla puede anunciar una descripción concisa de la imagen (que se ve en la barra negra de VoiceOver) y el usuario puede elegir si avanzar al artículo.

Estos son algunos comentarios sobre alt:

• alt te permite especificar una cadena simple que se usará cada vez que la imagen no esté disponible, por ejemplo, cuando no se cargue, cuando un bot de rastreo web acceda a ella o cuando un lector de pantalla la encuentre.
• alt difiere de title, o de cualquier tipo de subtítulo, en que solo se usa si la imagen no está disponible.

Escribir texto alternativo útil es un arte. Para que una cadena sea una alternativa de texto útil, debe transmitir el mismo concepto que la imagen, en el mismo contexto.

Considera incluir una imagen de logotipo vinculada en el encabezado de una página como las que se muestran arriba. Podemos describir la imagen con bastante precisión como "El logotipo de Funion".

<img class="logo" src="logo.jpg" a>lt="The Funion logo"

Puede ser tentador darle una alternativa de texto más simple, como “página principal” o “página principal”, pero eso no es útil para los usuarios con visión reducida ni para los usuarios videntes.

Sin embargo, imagina un usuario de lector de pantalla que quiere ubicar el logotipo del encabezado en la página. Si le asignas un valor alt de “home”, en realidad se crea una experiencia más confusa. Y un usuario vidente enfrenta el mismo desafío que un usuario de lector de pantalla: averiguar qué sucede cuando se hace clic en el logotipo del sitio.

Por otro lado, no siempre es útil describir una imagen. Por ejemplo, considera una imagen de lupa dentro de un botón de búsqueda que tenga el texto "Buscar". Si no estuviera el texto, definitivamente le darías a esa imagen un valor de alt de “búsqueda”. Sin embargo, como tenemos el texto visible, el lector de pantalla recogerá y leerá en voz alta la palabra "búsqueda". Por lo tanto, un valor alt idéntico en la imagen es redundante.

Sin embargo, sabemos que, si omitimos el texto alt, es probable que escuchemos el nombre del archivo de imagen, lo que es inútil y potencialmente confuso. En este caso, puedes usar un atributo alt vacío, y el lector de pantalla omitirá la imagen por completo.

<img src="magnifying-glass.jpg&qu>ot; alt=""

En resumen, todas las imágenes deben tener un atributo alt, pero no es necesario que todas tengan texto. Las imágenes importantes deben tener un texto alternativo descriptivo que describa de forma concisa qué es la imagen, mientras que las imágenes decorativas deben tener atributos alt vacíos, es decir, alt="".