Cómo escribir textos Alt

Cata

Head of UX

Blog, Home, UX Avanzado, UX Básico, UX Writing
Diciembre 9, 2024

El texto alternativo (ALT) es una pequeña descripción que se agrega a las imágenes de un sitio web o APP.

Permite que los lectores de pantalla transmitan contenido visual a personas con discapacidades visuales. Un buen texto alternativo es importante para garantizar la accesibilidad y mejorar la experiencia de usuario.

El mejor texto alternativo considera tanto el contexto de la imagen como su propósito.

No solo describas lo que ves. Considera el contexto y la intención del autor; es importantísimo comprender su propósito. Por lo mismo, utilizar ChatGPT no es la mejor opción.

La IA aún no

Usa la inteligencia artificial para refinar el texto alternativo, pero no le pidas que lo haga desde cero.

Bien, habiendo aclarado esto podemos seguir (lo lamento a los fanaticos del IA)

Pasos clave para escribir texto alternativo

Identifica la intención:
Escribe las ideas principales que transmite la imagen en el contexto de la página. Piensa: ¿Por qué el autor incluyó esta imagen?
Sé breve:
El texto alternativo no debe superar los 150 caracteres.

Evita redundancias:
No incluyas palabras como “imagen” o “foto”. Los lectores de pantalla ya identifican las imágenes como tales.
Incluye un punto al final:
Esto garantiza que el lector de pantalla haga una pausa adecuada.
Usa siempre el atributo ALT:
Incluso si estará vacío (alt=””). De lo contrario, los lectores de pantalla podrían anunciar el nombre del archivo de imagen.
Evita jerga y abreviaturas:
A menos que estés seguro de que todos los usuarios las comprenderán.

Un Alt para cada imagen

Imágenes decorativas

Si la imagen no aporta información y la página puede entenderse sin ella, clasifícala como decorativa.

En estos casos, como esta imagen, el atributo ALT debe estar vacío (alt=””) para que el lector de pantalla la omita.

Las imágenes decorativas pueden ser útiles para usuarios videntes como parte de la interfaz, pero para usuarios con discapacidad visual solo generan interrupciones.

Imágenes funcionales

Incluye texto alternativo para imágenes con funciones específicas, como:

Imágenes con enlaces: Describe la acción o destino del enlace, por ejemplo, Alt=”Ir a la página de contacto”.
Botones e íconos: Explica la acción que realizarán al hacer clic, por ejemplo, Alt=”Enviar formulario” o alt=”Abrir menú lateral”.
Códigos QR: Indica el propósito del código, como Alt=”Código QR para descargar nuestra app”.
Elementos de navegación: Proporciona información sobre el destino, por ejemplo, Alt=”Mapa del sitio” o alt=”Volver al inicio”.

Imágenes informativas

Acá el texto alternativo debe describir información no cubierta en otras partes de la página, o dar más detalle. Por ejemplo, si en esta imagen el título ya dice Alt:“Bola de nieve festiva castillo Fantasyland 2024 Mickey y Minnie Mouse”, el ALT no debe repetir esa descripción.

En cambio podríamos poner

Alt: “Bola de nieve de 15 centímetros con base roja adornada con figura de Pluto, en su interior se puede ver a Mickey y Minnie con sus trajes navideños acompañados del castillo Fantasyland.”

Imágenes complejas

Cuando la información de la imagen no puede resumirse en 150 caracteres, lo mejor es que muestres la información construida en texto html, si no puedes, incluye un texto alternativo ampliado con una descripción larga.

Una descripción larga es un texto que está presente en el HTML pero que es invisible para las personas que no utilizan un lector de pantalla. Puede estar en la misma página que la imagen, idealmente junto a ella.

Recuerda:

Tu principal objetivo al escribir texto alternativo es ayudar a los usuarios a obtener la información necesaria de manera eficiente. No intentes recrear experiencias visuales; concéntrate en satisfacer las necesidades del usuario.

Fuentes