Uso de IA para generar texto alternativo

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Imagina esto: haces clic en un enlace y llegas a un sitio web nuevo que nunca has visitado. Inmediatamente, ves muchos cuadraditos con el icono de la imagen rota cerca de la parte superior de la página. Piensas: “Qué raro. Mi wifi parece estar bien, así que quizá el servidor del sitio esté caído”.

Tras actualizar la página, aún se ven los iconos de las imágenes rotas. Decides pasar el cursor sobre un par de ellos y observas que el cursor se transforma en un puntero, por lo que asumes que deben ser botones interactivos. Como ninguna imagen tiene texto alternativo asignado, debes seleccionar cada una para ver a qué están vinculadas.

Piensa en cómo te sentirías si esto te pasara. Frustrado, ¿verdad? Es una experiencia horrible que probablemente abandonarías. Nadie quiere usar una página web llena de iconos de imágenes rotas como esta:

Una guía para páginas de destino

Desafortunadamente, esta frustrante experiencia les sucede con frecuencia a personas con discapacidades visuales o cognitivas. Excepto para ellos, no se trata solo del rendimiento de su wifi o de si el servidor de un sitio web está caído.

Las personas con discapacidades visuales o cognitivas pueden no ver ni percibir las imágenes de una página web, incluso si aparecen correctamente en su interfaz. Dependen del texto alternativo de la imagen para comprender su contenido. Pero si no se incluye texto alternativo, tienen que adivinar.

Lo entiendo: escribir texto alternativo puede ser complicado. Pero no te preocupes: implementar texto alternativo para evitar situaciones como imágenes rotas sin contexto es más fácil gracias a la IA.

Analicemos más a fondo por qué es importante el texto alternativo, las mejores prácticas para el texto alternativo y algunos generadores de texto alternativo de IA para probar la próxima vez que necesite escribir texto alternativo.

Cómo vectorizar una imagen en Figma: una guía completa
Table
  1. ¿Por qué es importante el texto alternativo?
  2. Qué hacer y qué no hacer al escribir texto alternativo
  3. Comparación de generadores de texto alternativo de IA
    1. ChatGPT 3.5
    2. AltText.ai
    3. GoPublish
  4. Conclusión

¿Por qué es importante el texto alternativo?

En pocas palabras, el texto alternativo proporciona una descripción textual significativa de las imágenes. Entre las imágenes que requieren texto alternativo se incluyen fotos reales, imágenes generadas por IA, imágenes de texto, ilustraciones, íconos o cualquier elemento no decorativo que transmita significado en una página web.

El texto alternativo es necesario en la mayoría de los casos, pero hay excepciones si una imagen no aporta información ni contenido a una página web. Estas imágenes se consideran decorativas; por ejemplo, la imagen de un borde que separa dos secciones de una página web o la imagen de fondo de un patrón para añadir estilo visual a una página web.

Al proporcionar imágenes con texto alternativo, los sitios web cumplen con los estándares internacionales de las Pautas de Accesibilidad al Contenido Web (WCAG).

En la Directriz 1.1 – Alternativas de Texto , las WCAG exigen que cualquier contenido no textual también esté disponible en texto plano para que pueda adaptarse a otros formatos. Esto ayuda a las tecnologías de asistencia, como los lectores de pantalla y las pantallas braille actualizables, a presentar el contenido no textual de la forma más adecuada para los usuarios.

Alineación de las métricas del producto con los objetivos comerciales

Aunque parezca simple, la falta de texto alternativo es la segunda falla más común de WCAG en los sitios web, según WebAIM Million .

Durante los últimos seis años, WebAIM ha evaluado un millón de páginas de inicio de sitios web para comprobar su conformidad con las WCAG. Cada año, más del 50 % de las páginas de inicio auditadas presentaban texto alternativo faltante en las imágenes:

Imagínese cuál sería la tasa de fallos si auditaran todo el sitio web…

Lo sorprendente de la frecuencia con la que falta el texto alternativo es que puede afectar el posicionamiento SEO de un sitio web. Los rastreadores web utilizan el texto alternativo para comprender cualquier archivo de imagen en una página web. Si un sitio web no proporciona texto alternativo para las imágenes, existe el riesgo de que estos rastreadores le otorguen un posicionamiento SEO inferior al no poder comprender completamente el contenido de las páginas web.

Diseño emocional: una visión general

Además, si un usuario experimenta una mala conexión a internet, extensiones que bloquean imágenes o problemas con el servidor, es posible que las imágenes no se muestren correctamente o que no se carguen. En este caso, no aparece ningún texto de asistencia junto a los iconos porque no se les asignó texto alternativo. Por lo tanto, el texto alternativo puede ser útil ante un pequeño problema de conexión o rendimiento.



Dicho esto, la falta de texto alternativo perjudica a todos, desde grandes empresas hasta usuarios particulares. Al tomar la pequeña iniciativa de añadir texto alternativo a cada imagen, la experiencia de todos mejora, desde un mejor rendimiento SEO hasta la capacidad de comprender completamente una página web.

Qué hacer y qué no hacer al escribir texto alternativo

Como en la mayoría de los ejercicios, existen buenas y malas prácticas al escribir texto alternativo. Si escribes texto alternativo rápidamente para marcar una casilla en la lista de tareas de accesibilidad, podrías decir que proporcionaste texto alternativo, pero eso no significa que sea útil para los usuarios.

Es mejor no apresurar este paso del proceso de diseño y desarrollo. En su lugar, trate de darle al texto alternativo la misma importancia que al contenido que siempre aparece en la interfaz. Escuchar el texto alternativo leído en voz alta por un lector de pantalla es la forma en que muchos usuarios procesan las páginas web, pero un texto alternativo mal escrito les dificulta hacerlo.

Al escribir texto alternativo, tenga en cuenta los siguientes consejos sobre qué hacer y no hacer:

Dos :

  • Mantenga el texto alternativo breve pero descriptivo
  • Intente mantener el texto alternativo por debajo de los 140 caracteres, incluidos los espacios.
  • Describe la información que muestra la imagen en lugar de la imagen en sí.
  • Utilice una gramática adecuada, como escribir con mayúscula la primera letra y terminar la oración con un punto.
  • Para las imágenes utilizadas como enlaces, como íconos, describa lo que sucede cuando se selecciona la imagen.

Por ejemplo, imagina que estás escribiendo el texto alternativo de un icono de avatar que enlaza a la página de perfil del usuario. Escribir “Ver tu perfil” es más útil y descriptivo que “Icono de avatar”.

No hacer :

  • No comience el texto alternativo con “Imagen de” o “Foto de”: los lectores de pantalla anuncian a los usuarios que se está describiendo una imagen, por lo que esto agrega redundancia.
  • No incluya texto alternativo en imágenes decorativas. Esto añade información superflua que un lector de pantalla no podrá analizar y puede resultar confuso. Puede usarlo para que los lectores de pantalla lo omitan.alt=""
  • No sesgues el texto alternativo. Por ejemplo, usa “Una mujer con un sombrero rosa” en lugar de “Una mujer hermosa con un sombrero rosa feo”.
  • Para imágenes de visualizaciones de datos, no describa el gráfico completo en el texto alternativo. En su lugar, utilice texto sin formato para describir la imagen y colóquela junto a ella.

La siguiente captura de pantalla del sitio web WebAIM es un excelente ejemplo de cómo describir un gráfico de líneas utilizando texto simple:

Siempre que tu texto alternativo describa la información de la imagen, no sea demasiado largo y no empiece con “Imagen de”, tendrás un buen comienzo. Sigue probando, perfeccionando y practicando la redacción del texto alternativo al añadir imágenes a tus diseños.

Comparación de generadores de texto alternativo de IA

Si eres nuevo en la creación de texto alternativo o tienes problemas para escribir el texto alternativo correcto para una imagen, hay esperanza gracias a las herramientas de IA existentes. Sin embargo, aún te enfrentas a una decisión: qué generador de texto alternativo de IA usar.

Algunas herramientas de IA están diseñadas específicamente para crear texto alternativo, mientras que otras son más generales, pero pueden generarlo. Algunas son gratuitas y otras de pago. He buscado en internet y he seleccionado tres herramientas para probarlas y compararlas:

  1. Chat GPT 3.5
  2. AltText.ai
  3. GoPublish

Para comparar las herramientas, usé la misma imagen generada con el generador de imágenes de Pixlr AI . Para generar la imagen, usé la instrucción “Un perro border collie atrapando un frisbee rojo en el aire en una playa soleada”. Pixlr generó cuatro imágenes, de las cuales una parecía lo suficientemente buena como para usarla:

ChatGPT 3.5

Primero, está la conocida ChatGPT 3.5 , la versión gratuita de la herramienta ChatGPT de OpenAI. Aunque no se pueden crear imágenes generadas por IA con la versión 3.5, se pueden adjuntar imágenes y hacer referencia a ellas en el mensaje:

Adjunté la imagen del border collie a mi mensaje y pregunté: “¿Puedes escribir un texto alternativo para la imagen adjunta?”

ChatGPT mostró el siguiente resultado: «Un border collie blanco y negro salta alegremente en el aire para atrapar un frisbee rojo en una playa de arena. El perro tiene las orejas erguidas y la mirada fija en el frisbee, con el océano y un cielo azul despejado de fondo. La imagen captura un momento de acción y emoción».

Largo, ¿verdad? Recuerda, el texto alternativo debe ser relativamente breve: menos de 140 caracteres, incluyendo espacios, si es posible.

Le pedí a ChatGPT que refinara el texto alternativo preguntando: “¿Puedes hacer que el texto alternativo tenga menos de 140 caracteres?”

ChatGPT respondió: “Un Border Collie blanco y negro salta para atrapar un frisbee rojo en una playa de arena, con el océano y un cielo azul claro de fondo”.

¡Mejor! Aunque al principio me dio un texto alternativo extenso, solo tuve que pedir una mejora para obtener un resultado útil que incluye las mejores prácticas mencionadas anteriormente. ChatGPT 3.5 no está diseñado específicamente para la generación de texto alternativo con IA, pero esta breve conversación me ayudó a encontrar el camino correcto:

Mi veredicto: ChatGPT 3.5 es una forma fácil de usar, similar a una conversación, de generar texto alternativo. Aunque hay que crear una cuenta para usarlo, ¡es gratis! Si alguna vez necesito refinarlo, solo tengo que encontrar el chat específico y empezar desde ahí.

AltText.ai

A continuación, AltText.ai , una herramienta de pago diseñada específicamente para crear texto alternativo con funcionalidad SEO. Esta herramienta ofrece una prueba gratuita con una asignación de 25 créditos, donde la generación de un texto alternativo equivale a un crédito. Después de la prueba gratuita, el plan más económico cuesta $5 al mes por 100 créditos.

Tras crear mi cuenta gratuita, me preguntaron qué modelo de IA prefería para generar el texto alternativo. Podía elegir entre Elaborado , Estándar , Fáctico o Conciso . Seleccioné Estándar , que es la opción predeterminada, ya que me pareció ofrecer el mejor equilibrio entre demasiado detallado y demasiado vago.

Agregué la imagen del border collie y usé la función de palabras clave SEO añadiendo las palabras “border collie” y “frisbee”. También podría agregar palabras clave negativas si quiero que el texto alternativo evite usar ciertas palabras o frases:

AltText.ai generó este texto alternativo: «Un border collie blanco y negro salta por los aires en una playa de arena, con la mirada fija en un frisbee rojo en pleno vuelo. El fondo muestra el mar y un cielo azul despejado, capturando un momento animado y divertido». Al igual que ChatGPT, mi primer intento resultó en un texto alternativo extenso:

Decidí ir a mi configuración y cambiar el modelo de IA de Estándar a Conciso para ver si esto ayudaba a acortar el texto alternativo:

Aunque tuve que usar un segundo crédito en la prueba gratuita, volví a subir la misma imagen con las mismas palabras clave SEO para generar una segunda versión del texto alternativo. Obtuve el resultado: “Un border collie blanco y negro salta para atrapar un frisbee rojo en una playa de arena con el océano de fondo”.

¡Mejor! Ahora sé que la configuración Concisa de AltText.ai se ajusta a las mejores prácticas para texto alternativo. También puedo usar la vista de tabla de datos para comparar diferentes versiones de texto alternativo para la misma imagen, como hice en esta demostración.

Mi veredicto : AltText.ai es un potente generador de texto alternativo con IA que te ayuda a personalizarlo para incluir o excluir palabras específicas con fines SEO. Las desventajas son que es una herramienta de pago, necesitas una cuenta para probarla y cada refinamiento del texto alternativo para la misma imagen cuesta un crédito adicional.

GoPublish

Por último, pero no menos importante, está el Generador de Texto Alternativo de Imagen de GoPublish . Esta herramienta gratuita te permite subir una imagen para generar texto alternativo mientras optimiza su SEO. También existe una extensión que puedes instalar en Chrome, pero no es necesaria para usar la función de texto alternativo.

Una vez en la página de inicio del generador de texto alternativo de imágenes de GoPublish, cargué la imagen del border collie en la herramienta y luego seleccioné el botón Generar texto alternativo :

En unos segundos, GoPublish mostró el texto alternativo: “Un perro blanco y negro saltando en el aire para atrapar un frisbee rojo”.

De inmediato, obtuve un texto alternativo conciso y descriptivo. Al hacer clic en el botón Copiar texto, el resultado se copió al portapapeles, lo que facilitó su uso inmediato.

Aunque no puedo solicitar mejoras ni añadir palabras clave específicas, recibí un texto alternativo descriptivo y conciso que se ajusta a la longitud recomendada. Si fuera necesario, podría usar el texto alternativo generado como punto de partida y añadir manualmente las palabras clave SEO.

Mi veredicto : GoPublish es un generador de texto alternativo con IA, sencillo y rápido, que produce texto alternativo descriptivo y conciso. Aunque no se puede refinar ni personalizar el texto alternativo directamente en GoPublish, es gratuito y no requiere crear una cuenta para acceder a la herramienta.

Conclusión

Es importante incluir texto alternativo junto con las imágenes. No solo permite que un sitio web cumpla con los estándares WCAG, sino que también puede mejorar la experiencia de todos. Sin texto alternativo, un usuario podría no comprender completamente una página web o una empresa podría tener un bajo posicionamiento SEO para su sitio web.

Al escribir texto alternativo, puede ser útil pensar en él como un “tuit” para cualquier imagen no decorativa en una página web. No es muy largo, es descriptivo y transmite la idea. Pero a diferencia de un tuit, el texto alternativo debe seguir una gramática correcta y ser objetivo, basándose en opiniones.

Si alguna vez tienes problemas para escribir texto alternativo, puedes recurrir a la IA con cualquiera de las herramientas que se muestran en este artículo. Chat GPT, AltText.ai y GoPublish ofrecen funciones suficientes para generar texto alternativo.

Para usar estos generadores de texto alternativo con IA, solo tienes que subir la imagen y dejar que la IA haga el resto, con ajustes ocasionales. En el peor de los casos, estas herramientas de IA ofrecen un excelente punto de partida para texto alternativo que puedes copiar, pegar y editar según necesites. En el mejor de los casos, obtendrás un resultado útil de inmediato.

Como mostró el informe Millonario de WebAIM, muchos sitios web aún no usan texto alternativo y no cumplen con las prácticas de accesibilidad. Esta es una solución sencilla que todos podemos implementar en nuestros procesos para lograr diseños más inclusivos y experiencias mejoradas, con o sin la ayuda de la IA.

Si quieres conocer otros artículos parecidos a Uso de IA para generar texto alternativo puedes visitar la categoría Guias.

Entradas Relacionadas