Guía para entrenar a tu inteligencia artificial para generar texto alternativo de calidad

Guía para entrenar a tu inteligencia artificial para generar texto alternativo de calidad

Siempre que hablo de accesibilidad web tarde o temprano menciono el texto alternativo de las imágenes, así que creo que este tema se merece un post en exclusividad, pero además uno de esos en los que también hablo sobre inteligencia artificial.

Cierra los ojos un momento, imagina que te estoy mostrando la fotografía más espectacular que he hecho nunca, es la pieza central de mi nuevo artículo y en ella puede verse el pico de una montaña al amanecer, con nubes bajas flotando en el valle como un mar de algodón, y los primeros rayos de sol tiñendo la nieve de un rosa anaranjado.

Ahora abre los ojos…

¿Qué pasaría si, en lugar de esa descripción que te he contado, simplemente hubieras escuchado las palabras: IMG_8874.JPG?

Además de no entender nada, sentirías que te has perdido algo, ¿verdad? como que te falta algo o no te estoy contando todo lo que debería, pues bien, esa es la realidad diaria para millones de personas que navegan la web con lectores de pantalla. Y esa pequeña pieza de texto que llena el vacío, el texto alternativo o alt text, es una de las herramientas de inclusión más potentes y, a la vez, más descuidadas de todo internet.

Muchos creadores ven el alt text como una tarea tediosa, un campo más a rellenar para el SEO. Pero hoy, quiero cambiar esa perspectiva para siempre, (o al menos para lo que te dure).

Una cosa buena a la hora de pensar en esta tarea es que ahora tenemos a la inteligencia artificial a nuestra disposición, un ayudante prodigioso pero que sin un buen maestro puede crear obras caóticas.

Espero que esta guía te sirva de manual de entrenamiento definitivo para convertir a tu inteligencia artificial (sea ChatGPT, Gemini o cualquier otra) en un (o una) artista del texto descriptivo.

Al final, no solo tendrás un sitio más accesible, sino que contarás historias que transmitan más y mejor. (y seguro que a Google también le mola esto, pero yo ahí no me meto, o al menos hoy no)

La anatomía de un Alt Text perfecto (más allá de «perro en un parque»)

Antes de enseñarle a nuestro aprendiz, el maestro debe dominar los fundamentos. Un buen alt text no es simplemente nombrar lo que hay en la imagen. Es transmitir significado y función. (Esta frase creo que es lo más importante de todo este post, apuntadla por ahí y tenedla siempre a mano)

Un error que veo constantemente es el alt text vago. alt="perro" o alt="gráfico" son técnicamente textos alternativos, pero son inútiles. Es como describir la Mona Lisa diciendo «mujer», no le hacemos justicia.

Para evitarlo, hay que usar estos tres elementos: Objeto + Acción + Contexto.

1. Objeto: ¿Qué es lo principal en la imagen? Sé específico. No es un «coche», es un «coche deportivo rojo descapotable».
2. Acción: ¿Qué está haciendo el objeto? ¿Está aparcado, está corriendo en un circuito, está siendo reparado? La acción da vida a la imagen.
3. Contexto: ¿Dónde y cómo está ocurriendo la acción? Esto aporta el fondo, el ambiente. «en una carretera de montaña al atardecer», «en un taller mecánico con luces de neón».

Ejemplo práctico:

• Imagen: Una foto de una persona trabajando en un portátil en la playa.
• Ejemplo con Alt text malo: alt="persona ordenador"
• Ejemplo con Alt text bueno: alt="Una mujer joven (Objeto) teclea en su ordenador portátil (Acción) sentada en una toalla en una playa de arena blanca, con el mar turquesa de fondo (Contexto)."

Esta fórmula es tu base. De hecho, se alinea directamente con el criterio más fundamental de las Pautas de Accesibilidad para el Contenido Web: WCAG 1.1.1 – Contenido no textual. No te asustes por el nombre; simplemente dice que todo lo que no es texto debe tener una alternativa textual que cumpla un propósito equivalente. Los tres elementos que os propongo buscan precisamente eso: la equivalencia de propósito.

El Test Definitivo: Pídele a un amigo que cierre los ojos, léele tu texto alternativo. Si la imagen que se forma en su mente es razonablemente parecida a la imagen real y entiende por qué la has puesto ahí, has triunfado.

El duelo eterno: imágenes informativas vs. decorativas

No todas las imágenes nacen iguales. Algunas son las protagonistas de tu contenido, mientras que otras son meros extras. Saber distinguirlas es crucial, porque se tratan de formas radicalmente opuestas.

Imágenes Informativas

Son las imágenes que aportan información, que añaden valor, que son esenciales para entender el contenido. Son las fotos de tus productos, los gráficos con datos, los diagramas de flujo, las fotos de tu equipo. Estas imágenes SIEMPRE deben tener un texto alternativo descriptivo.

Imágenes Decorativas

Estas son las imágenes que solo están ahí por estética. Un borde floral, un icono genérico al lado de un título, una foto de stock abstracta para «rellenar espacio». No aportan información nueva; si las quitas, el significado del contenido no cambia.

Para estas imágenes, la regla de oro es usar un atributo alt vacío.

alt=""

¡Atención! Esto no es lo mismo que no poner el atributo alt. (y por favor, esto también apuntadlo por ahí)

• alt="" (Atributo vacío): Le dice al lector de pantalla: «Oye, aquí hay una imagen, pero es solo decoración, ignórala y sigue adelante». Esto es bueno, reduce el «ruido» y la fatiga del usuario.
• Sin atributo alt: El lector de pantalla se encuentra con un problema. No sabe qué hacer. En su intento por ser útil, puede que lea el nombre del archivo: "IMG_GUION_BAJO_8874_FINAL_VERSION2.JPG". Esto es una experiencia de usuario terrible.

El punto ciego de la inteligencia artificial: El contexto es el Rey

Aquí tienes la primera y más importante lección para tu aprendiz de inteligencia artificial: La inteligencia artificial no puede saber con un 100% de certeza si una imagen es informativa o decorativa sin conocer el contexto completo de tu página.

Una imagen de una taza de café puede ser decorativa en un post sobre productividad, pero es muy informativa en la página de producto de tu tienda online donde vendes esa taza.

Pídeselo a la inteligencia artificial (para ayudarte a decidir):

Actúa como un consultor de accesibilidad web. Estoy escribiendo un artículo sobre [tema del artículo]. He incluido una imagen que muestra [describe la imagen]. ¿Considerarías esta imagen informativa o decorativa en este contexto? Justifica tu respuesta.

Esta pregunta os obliga a ti y a la inteligencia artificial a pensar en la función de la imagen, que es la clave de todo.

Entrenando a tu aprendiz: Prompts para cada ocasión

Manos a la obra. Aquí es donde pasamos de la teoría a la práctica de élite. Antes de nada, recuerda siempre empezar tu conversación con la inteligencia artificial con un «súper-prompt» que le asigne el rol de experto en accesibilidad.

El prompt básico para fotos cotidianas

Para esas imágenes de paisajes, personas o situaciones generales.

El prompt:

Necesito un texto alternativo para una fotografía. Sigue la fórmula "Objeto + Acción + Contexto". Sé descriptivo pero conciso (máximo 125 caracteres, idealmente). La imagen muestra: [Describe la escena con tus propias palabras. Ej: "un chef espolvoreando harina sobre una masa de pan en una cocina rústica de madera"].

El prompt de «precisión quirúrgica» para E-commerce

En una tienda online, los detalles lo son todo. El alt text debe ayudar al usuario a tomar una decisión de compra.

El prompt:

Actúa como un experto en copywriting para e-commerce y accesibilidad. Necesito un texto alternativo para la foto de un producto. La descripción debe ser objetiva y centrarse en los detalles visuales que un comprador necesitaría.

Producto: [Nombre del producto, ej: «Zapatillas de running ‘Velocity X'»]

Descripción de la imagen: [Describe la foto, ej: «Las zapatillas fotografiadas de perfil sobre un fondo blanco. Son de color azul eléctrico con detalles en naranja fluorescente. Se ve la textura de la malla transpirable y la suela de goma blanca gruesa.»]

Genera un texto alternativo que destaque estos detalles.

El prompt «traductor de datos» para gráficos y diagramas

Este es el nivel de Gran Maestro. Un gráfico es una pesadilla de accesibilidad si no se maneja bien. Aquí usaremos una estrategia de dos partes:

1. alt text corto: Un resumen conciso del tema y la conclusión del gráfico.
2. Descripción larga: Un texto visible en la página (justo debajo del gráfico) que describe los datos en detalle, a menudo en una tabla o lista HTML.

El prompt:

Tengo un gráfico complejo y necesito hacerlo accesible. Te proporcionaré los datos y quiero que generes dos elementos:

1. Un atributo ‘alt’ corto y conciso que resuma el propósito y la conclusión principal del gráfico.

2. Una descripción larga y detallada en formato de texto simple, que pueda convertir en una tabla HTML o una lista, para colocar debajo del gráfico.

Datos del Gráfico:

– **Tipo:** Gráfico de líneas.

– **Título:** Evolución de usuarios activos mensuales (2023-2025).

– **Eje X (Tiempo):** Trimestres desde Q1 2023 hasta Q2 2025.

– **Eje Y (Usuarios):** En millones.

– **Datos clave:** La línea empieza en 5 millones, crece de forma constante hasta 15 millones en Q4 2024, y luego se acelera bruscamente hasta 25 millones en Q2 2025.

– **Conclusión principal:** Ha habido un crecimiento exponencial en el último semestre.

La inteligencia artificial te dará una respuesta clara que puedes implementar directamente, haciendo accesible una pieza de información que de otro modo sería invisible.

El prompt «detector de emociones» para fotos con carga narrativa

A veces, la información más importante de una foto no es lo que se ve, sino lo que se siente. El periodismo, los blogs personales o las webs de ONGs a menudo usan imágenes para evocar una emoción.

El prompt:

Necesito un texto alternativo para una fotografía con una fuerte carga emocional. No te limites a describir lo que se ve, intenta capturar el tono y la emoción de la escena. La imagen muestra: [Describe la escena, ej: "Un bombero, con la cara cubierta de hollín, acuna a un pequeño gatito que ha rescatado de un edificio quemado. El bombero está sonriendo con cansancio y alivio."]

El prompt para botones e iconos: describe la acción, no el dibujo

Un error garrafal. Tienes un icono de un carrito de la compra que es un enlace a la cesta.

Ejemplo no accesiblel: alt=»Carrito de la compra»

Ejemplo accesible: alt=»Ver mi cesta de la compra (3 artículos)»

El alt text debe describir la acción o el destino, no el icono en sí mismo.

El prompt:

Estoy usando un icono como enlace. El icono es un [describe el icono, ej: "un sobre de carta"]. Este enlace lleva al usuario a [describe el destino, ej: "la página de contacto"]. Genera un texto alternativo conciso y orientado a la acción para este enlace.

La supervisión del maestro: errores que la inteligencia artificial comete

Tu aprendiz es brillante, pero todavía es un aprendiz, necesita tu supervisión. Aquí están los errores más comunes que la inteligencia artificial comete y que tú, como maestro, debes corregir:

1. La redundancia del «Imagen de…»: Muchas inteligencias artificiales empiezan el alt text con «Una imagen de…» o «Una fotografía de…». Esto es innecesario y molesto. El lector de pantalla ya anuncia que es una imagen. Simplemente, borra esa parte.
2. La alucinación creativa: A veces, la inteligencia artificial se inventa detalles que no están en la imagen para hacerla más «vívida». Asegúrate de que cada detalle que describe es objetivamente cierto.
3. La ceguera de contexto: Como vimos, la inteligencia artificial no conoce el propósito final de tu artículo. Puede que describa un detalle de la imagen que es irrelevante para tu texto. Tu trabajo es editar el alt text para que se alinee con el mensaje de tu contenido.
4. La verbosidad excesiva: Aunque le pidas concisión, a veces la inteligencia artificial se explaya, (sí, a veces más que yo). Un alt text no debería ser un ensayo. Si la descripción necesita ser larga, es mejor usar la técnica de dos partes que vimos para los gráficos.

Tu papel es el de un editor, la inteligencia artificial te da un borrador al 90%. Tu empatía, tu conocimiento del contexto y tu visión como creador aportan el 10% final que lo convierte en una obra maestra.

Conclusión

Creo que le hemos dado un buen meneo al atributo alt , desde los fundamentos más básicos hasta técnicas de prompting avanzadas. Espero que ahora veas el atributo alt no como una casilla a marcar, sino como una oportunidad. Una oportunidad para ser más inclusivo, para contar mejores historias, para ofrecer una experiencia de usuario superior y para comunicar con mayor eficacia.

La inteligencia artificial nos ha regalado un pincel increíblemente sofisticado, pero la visión, la intención y el corazón detrás de cada pincelada siguen siendo nuestros.

Os propongo probad estos promts con las imágenes de vuestra página web y que me contéis los resultados en los comentarios.