Texto alternativo: la guía definitiva
Hoy en colaboración con Susana Pallero y Daniela Belvedere vamos a hablar de la pauta: 1.1.1 Contenido que no es texto. Te contamos qué es el texto alternativo, el atributo alt, los tipos de imágenes que existen, cuándo agregar un texto alternativo, cuándo no y por qué y cómo construir un texto alternativo correcto.
1.1.1 Contenido que no es texto: Todo el contenido que no es texto, que se presenta al usuario, tiene una alternativa de texto que sirve para el propósito equivalente.
¿Qué es el texto alternativo?
Es un texto que se agrega dentro del atributo alt que, como su nombre lo indica, da información de modo alternativo a una imagen y ayuda a traducir elementos puramente visuales a texto, para que puedan ser leídos por un lector de pantalla y ser comprensibles como interfaz sonora.
¿Qué es el atributo alt?
Para comprender qué es un atributo, hay que comprender qué es una etiqueta HTML.
Una etiqueta es un código que se usa para definir una estructura de la página. Por ejemplo la etiqueta <img> indica que esa estructura será una imágen, la etiqueta <p> indica que esa estructura será un párrafo, y así con distintas etiquetas vamos armando la estructura de nuestra página o producto.
Un atributo en cambio es un valor que asignamos a una etiqueta, como color, tamaño, etc.
En el caso de la etiqueta párrafo o <p> sus atributos pueden ser por ejemplo la alineación del texto a la izquierda, al centro o a la derecha, entre otros.
El alt es un atributo de la etiqueta imagen y el valor que se ingresa dentro del atributo es lo que llamamos: texto alternativo.
Las funciones principales de este atributo son:
- Permitir a las tecnologías asistivas (por ejemplo: lectores de pantalla) acceder a la información que hayas puesto ahí como descripción de la imagen, para proveer a usuarios no visuales la información que está dada por la imagen.
- Si la imagen no estuviera o si no fuera posible cargarla por un problema de conexión, muestra ese texto permitiendo a cualquier usuario acceder a esa descripción y no perderse la información que brinda esa imagen.
Pero, ¿todas las imágenes necesitan texto alternativo?
No. Pero todas las imágenes necesitan sí o sí un atributo alt.
¿Por qué? Porque de esa manera las tecnologías asistivas saben que sí tuviste en cuenta la accesibilidad, y que a propósito estás pidiendo que ignore esa imágen y no va a tratar de leerla. La va a omitir completamente para el usuario ayudando a que el sitio sea más comprensible y usable por usuarios no visuales.
Para saber si nuestra imagen necesita o no texto alternativo es necesario saber identificar qué tipos de imágenes existen y sus características.
Te dejamos un link a codepen con la explicación de Dani de como escribir textos alternativos
Tipos de imágenes
- Decorativas
- Informativas
- Funcionales
A la vez estos tipos de imágenes pueden contener:
- Texto incrustado
- Texto plano
Imágenes decorativas
Las imágenes decorativas no llevan texto alternativo ya sea porque se las considera irrelevantes o redundantes.
Como su nombre lo indica son de decoración, a veces llamados “eye candy”, sirven para hacer los diseños más lindos o atractivos pero no necesariamente tienen una funcionalidad más allá de lo estético.
También puede que contengan información pero esta sea redundante porque luego hay un texto o un contexto que da la misma información de forma clara y precisa.
Ese contexto puede estar en el texto que le siga o en forma de leyenda como por ejemplo un pie de foto.
Este tipo de imágenes no necesitan descripción, es decir que no tenemos que escribir un texto alternativo, pero en el código como ya lo habíamos mencionado, debemos agregar el atributo alt de todas maneras con el texto alternativo vacío.
El código seria de esta manera:
alt=""Esto le da la instrucción a las tecnologías asistivas para que ignoren ese bloque de código.
¿Qué pasa si no agregamos el atributo alt o no agregamos las comillas dentro del atributo?
Las tecnologías asistivas la van a leer con el nombre del archivo, o directamente anuncian que hay una imágen y nada más.
Esto puede ser muy confuso para el usuario porque equivale a decirle “acá hay algo pero no podes saber qué es ni si contiene información importante”.
Imágenes informativas
Son las imágenes que son útiles para que el usuario pueda entender la experiencia completa. A estas imágenes hay que describirlas para dar contexto, o porque contienen datos o información para que todas las personas puedan tener la misma información a medida que navegan nuestro producto digital.
Las imágenes informativas a veces están compuestas a su vez por elementos esenciales y no esenciales.
Los elementos esenciales son aquellos que contienen información relevante para el usuario. Y no esenciales los “decorativos” dentro de la imagen. Los elementos esenciales deben ser descritos, y los no esenciales deben ser omitidos.
Imágenes funcionales
Llamamos imágenes funcionales a aquellas que además tienen asociada una “funcionalidad” o una acción que se dispara cuando el usuario interacciona con ellas. Por ejemplo, los logotipos, iconos, e imágenes dentro de un botón o imágenes que funcionan como links.
En este caso la forma de escribir el texto alternativo no describe la imágen, si no la acción a través .
La forma correcta de escribir el texto alternativo para un ícono funcional es utilizando verbos que indiquen la acción que se ejecutará al activarlos en vez de la descripción visual del elemento, en su etiqueta.
La etiqueta para un menú de navegación podría ser “Mostrar menú de navegación” y “Ocultar menú de navegación”
Si la imagen es icono que se intercambia con otro visualmente para representar dos acciones por ejemplo si usamos un corazon (vacio y lleno) para agregar a favoritos, el texto alternativo debería describir la acción que ocurre, por ejemplo instagram que usa sus corazones para decir si algo te gusta o no, el corazon vacio dice “me gusta botón” y en el corazón lleno “te gusta botón”(así lo hace instagram) pero debería incluir el estado que se activará cuando lo presionas: “quitar me gusta”.
En el caso de los logotipos por un lado las consideramos como elementos decorativos y por esa razón no deben cumplir las relaciones de contraste (1.4.3 Contraste mínimo) y llevar el alt text vacio. Pero si nuestro logo está en la web y es un link sí deberíamos agregar un alt con la funcionalidad que tiene, que en general es redirigir a la home o página de inicio, y en ese caso nuestro alt text debería ser: alt= “Ir a página de inicio” o alt= “página de inicio”.
Imagenes con texto incrustado
Muchas veces nos vamos a encontrar con este recurso en banners que arman los equipos de marketing y que se suben a nuestro sitio o cualquier imagen que subimos a las redes sociales que tenga texto.
Los lectores de pantalla no pueden leer texto incrustado en imágenes. Si hay información esencial incrustada como texto en la imagen debemos incluir lo esencial como texto alternativo.
Una manera fácil de darnos cuenta si el texto en la imagen está incrustado, la flecha del mouse por encima del texto y si no cambia, entonces muy probablemente el texto es incrustado.
el texto es una imagen
Imágenes con texto plano
Las tecnologías asistivas pueden leer el texto plano, por lo cual una imagen que contenga texto plano no necesitaría un texto alternativo. Se agrega el atributo alt vacío como vimos anteriormente en imágenes decorativas.
Una manera fácil de darnos cuenta si el texto en la imagen es plano, es pasar la flecha del mouse por encima del texto y si cambia a cursor y se puede seleccionar el texto para copiarlo, entonces muy probablemente el texto sea plano.
Ahora que sabés cuándo es necesario agregar un texto alternativo o no, te dejamos un par de tips para que escribas un texto alternativo eficiente.
Buenas Prácticas para escribir texto alternativo
Lo bueno si breve, dos veces bueno.
Debe ser más largo y descriptivo que una palabra, salvo que esa palabra realmente sea suficiente, pero nunca debe ser mayor a 125 caracteres.
Que dé igual si se ve la imagen.
La finalidad del texto alternativo es oficiar justamente como alternativa para dar la misma información que da una imagen.
No es solo para los usuarios ciegos. Si los usuarios se encuentran con mala conexión y las imágenes no se abren, se mostrará el texto alternativo así no pierden información que solo se muestra en la imagen.
Informativo.
No uses palabras sueltas sin sentido que “te ayudan a posicionarte en buscadores”. Cualquier estructura semánticamente correcta ayuda al SEO pero si luego al entrar los usuarios no encuentran una navegación accesible y placentera así como vinieron… se van.
Cuidado con los sesgos.
No trates de describir todo lo que estás viendo solo porque lo estás viendo si eso no contiene información relevante para el relato. No se trata de describir una experiencia visual sino de crear una experiencia auditiva.
No uses descripciones visuales como por ejemplo colores.
Muchas palabras que usamos son eminentemente visuales. Trata de omitir ese tipo de terminología.
La excepción sería que la información sobre el color fuera relevante para el tema del que se está hablando.
No redundes.
No empieces la descripción con “Imagen de…”
No reutilices palabras clave y fuerces su utilización en cada imagen que hay en tu página solo para posicionar SEO.
Si por un momento pensás “No sé qué poner”, quizá es que no tenés que poner nada y esa imagen no es tan importante o informativa. Si la misma información se encuentra en el texto a continuación, no hace falta repetir, es decorativa.
