Cómo escribir texto alternativo: una guía práctica para desarrolladores y equipos de contenido

Según el informe WebAIM Million 2025, la falta de texto alternativo afecta al 55.5% de todas las páginas de inicio analizadas, y de esos errores, el 44% involucran imágenes enlazadas, lo que rompe por completo la navegación para las personas que usan lectores de pantalla. No es un problema de nicho. Es la mitad de la web dejando a las personas ciegas y con baja visión varadas frente a imágenes que no dicen nada. Si tu equipo publica imágenes sin pensar cuidadosamente en el texto alternativo, no solo está fallando en una casilla de cumplimiento: le está diciendo a una parte significativa de tu audiencia que su experiencia no importa.

Qué es realmente el texto alternativo (y por qué es más que una etiqueta)

El texto alternativo, abreviatura de texto alternativo, es una descripción escrita incrustada en el atributo alt de un elemento HTML <img>. Cuando un lector de pantalla se encuentra con una imagen, lee el texto alternativo en voz alta a la persona usuaria. Cuando una imagen no se carga —debido a una conexión lenta, una URL rota o un bloqueador de contenido— el texto alternativo se muestra en su lugar. También es indexado por los motores de búsqueda, lo que lo convierte en una señal de SEO silenciosa pero significativa.

Pero aquí es donde muchos equipos se equivocan: el texto alternativo no es solo una red de seguridad de respaldo. Es la forma principal en que las personas ciegas y con baja visión —aproximadamente 43.3 millones de personas ciegas en todo el mundo y 295 millones con baja visión moderada a grave— experimentan el contenido visual en la web. Lectores de pantalla como NVDA y JAWS (los dos lectores de pantalla de escritorio más utilizados) anuncian el texto alternativo en el momento en que el foco llega a una imagen. Si ese texto está ausente, es insignificante o redundante, la experiencia de la persona usuaria se degrada de inmediato.

La investigación sobre personas ciegas y con baja visión ofrece una imagen contundente de lo que ocurre en la práctica. Algunas personas informan que ignoran por completo las imágenes en los sitios web porque, según su experiencia, el texto alternativo nunca es útil. Otras se saltan las imágenes de productos en sitios de comercio electrónico y se basan en las reseñas de personas usuarias, porque textos alternativos como "image001.jpg" o "photo" no les dicen nada. Eso no es un problema del lector de pantalla: es un problema de contenido, y es uno que tu equipo puede solucionar.

Entender el texto alternativo como una responsabilidad de contenido —no solo una tarea de desarrollo— es el primer cambio mental que todo equipo necesita hacer. La persona desarrolladora implementa el atributo; el equipo de contenido entiende el contexto. Ambos son esenciales para hacerlo bien.

El panorama legal y de cumplimiento

El texto alternativo no es opcional si te preocupa la exposición legal. El Criterio de Éxito 1.1.1 de WCAG (Contenido no textual) es un requisito de Nivel A, el nivel más bajo y más fundamental de cumplimiento. No cumplirlo significa fallar cualquier auditoría formal de accesibilidad. En Estados Unidos, la ADA se ha aplicado a sitios web en miles de casos, con 4,605 demandas relacionadas con sitios web bajo la ADA presentadas solo en 2024. La falta de texto alternativo es una de las violaciones más citadas en las cartas de requerimiento precisamente porque es fácilmente detectable, objetivamente medible y bloquea directamente el acceso al contenido principal.

Más allá de la ADA, la European Accessibility Act (EAA) pasó a ser exigible el 28 de junio de 2025. Si tu organización presta servicios a clientes en la UE, el incumplimiento puede conllevar sanciones de hasta €100,000 o el 4% de los ingresos anuales. WCAG 2.2 Nivel AA es ampliamente reconocido como el punto de referencia para el cumplimiento de la EAA, y sus requisitos de texto alternativo bajo el criterio 1.1.1 no han cambiado con respecto a versiones anteriores: todas las imágenes informativas deben tener alternativas textuales determinables mediante programación.

En Canadá, la Accessibility for Ontarians with Disabilities Act (AODA) exige de manera similar la conformidad con WCAG para organizaciones del sector público y privado. La Sección 508 en el contexto federal de EE. UU. tiene sus propios requisitos paralelos. La conclusión es coherente en todas las jurisdicciones: el texto alternativo no es un “nice-to-have”, y el entorno normativo se está endureciendo, no relajando.

WCAG 1.1.1 es Nivel A, el nivel de cumplimiento más básico. No cumplirlo significa fallar todas las auditorías de accesibilidad, y es la violación más fácil de detectar para las herramientas automatizadas y los equipos legales.

El marco de decisión: qué imágenes necesitan qué

Uno de los conceptos erróneos más comunes es que cada imagen necesita una descripción textual. Eso es incorrecto, y agregar texto alternativo innecesario a imágenes decorativas en realidad empeora la experiencia para las personas que usan lectores de pantalla, que entonces tienen que escuchar ruido que no aporta ningún valor. La verdadera habilidad es saber en qué categoría cae cada imagen. Aquí tienes un marco práctico:

• Imágenes informativas — Fotos, ilustraciones o gráficos que transmiten contenido o significado que no está presente en el texto circundante. Estas requieren texto alternativo descriptivo que comunique la misma información que proporciona la imagen.
• Imágenes funcionales — Imágenes usadas como botones, enlaces o controles (por ejemplo, un ícono de lupa que envía una búsqueda, o un logotipo que enlaza a la página de inicio). El texto alternativo debe describir la función, no la apariencia visual: alt='Search', no alt='Magnifying glass icon'.
• Imágenes decorativas — Adornos visuales que aportan valor estético pero no tienen significado: patrones de fondo, divisores, ilustraciones puramente decorativas. Estas deben tener un atributo alt vacío (alt=''), lo que indica al lector de pantalla que omita la imagen por completo.
• Imágenes de texto — Capturas de pantalla o gráficos que contienen palabras. La mejor práctica es evitarlas por completo y usar texto real con estilo en su lugar. Cuando son inevitables, el texto alternativo debe reproducir literalmente el texto de la imagen.
• Imágenes complejas — Gráficos, mapas e infografías que contienen datos densos. Se requiere un texto alternativo breve a modo de resumen, además de una descripción estructurada más larga en el cuerpo de la página o enlazada desde la imagen.

Ten en cuenta que el texto alternativo vacío (alt='') no es lo mismo que un atributo alt ausente. Una imagen sin atributo alt puede hacer que el lector de pantalla lea en voz alta el nombre del archivo o la URL, lo que casi siempre es peor que el silencio. Incluye siempre el atributo, incluso cuando su valor sea intencionalmente vacío.

Escribir texto alternativo que realmente funcione: reglas prácticas

Un buen texto alternativo es más difícil de escribir de lo que parece. Estas son las reglas concretas que separan las descripciones útiles del ruido:

• Mantén la concisión. Apunta a menos de 125 caracteres. Lectores de pantalla como JAWS y NVDA pueden truncar textos alternativos más largos a mitad de frase, cortando justo la información que te esforzaste en proporcionar. Si la imagen es lo bastante compleja como para requerir más, eso indica que necesitas una descripción larga complementaria.
• No empieces con "Image of" o "Photo of". Los lectores de pantalla anuncian automáticamente que un elemento es una imagen antes de leer el texto alternativo. Escribir alt='Image of a smiling woman' hace que el lector de pantalla diga "image, image of a smiling woman", lo cual es redundante y hace perder tiempo a quien escucha.
• Describe el significado, no solo la apariencia. El texto alternativo debe comunicar la misma información o función que la imagen. Si estás mostrando un gráfico del crecimiento de ingresos del Q3, no escribas alt='Bar chart'. Escribe algo como alt='Bar chart showing Q3 revenue up 22% year-over-year', y luego proporciona los datos completos en el texto circundante.
• Adecúa el texto al contexto. La misma fotografía puede requerir textos alternativos diferentes según dónde se use. Una foto de un portátil sobre un escritorio usada en una sección de "Conoce a nuestro equipo" puede necesitar texto alternativo que describa el espacio de trabajo; usada en una ficha de producto, debe describir las especificaciones y la apariencia del portátil.
• No llenes de palabras clave. El texto alternativo es indexado por los motores de búsqueda, pero llenarlo de palabras clave es una mala experiencia de uso y una violación de la intención de WCAG. Escribe primero para la persona usuaria.
• Usa gramática y puntuación correctas. Los lectores de pantalla traducen texto a voz, y la puntuación afecta el ritmo y la claridad. Un fragmento de frase se escucha menos natural que una idea completa.

El texto alternativo no tiene por qué ser una descripción fría y objetiva. Puede —y a veces debe— transmitir matices, contexto e incluso emoción cuando esas cualidades son relevantes para la experiencia de la persona usuaria del contenido.

Ejemplos de código: bien y mal

La teoría es una cosa. Veamos cómo se aplican estos principios en HTML real.

Imagen informativa — mal texto alternativo:

<img src='team-photo.jpg' alt='photo'>

Imagen informativa — buen texto alternativo:

<img src='team-photo.jpg' alt='Accsible engineering team gathered around a whiteboard during a product sprint meeting'>

Imagen funcional (logotipo enlazado) — mal texto alternativo:

<a href='/'>
  <img src='logo.svg' alt='logo'>
</a>

Imagen funcional (logotipo enlazado) — buen texto alternativo:

<a href='/'>
  <img src='logo.svg' alt='Accsible — return to homepage'>
</a>

Imagen decorativa — implementación correcta:

<img src='decorative-wave-divider.svg' alt='' role='presentation'>

Imagen compleja (gráfico) — enfoque correcto con descripción larga enlazada:

<img
  src='q3-revenue-chart.png'
  alt='Bar chart: Q3 revenue up 22% YoY. Full data table below.'
  aria-describedby='chart-description'
>
<div id='chart-description'>
  <!-- Full tabular data or structured text description here -->
</div>

Para botones de ícono que no tienen etiqueta de texto visible, usa aria-label en el propio botón y establece alt='' en la imagen del ícono para evitar el doble anuncio:

<button aria-label='Close dialog'>
  <img src='close-icon.svg' alt=''>
</button>

Cómo manejar tipos específicos de imágenes

Imágenes de productos en comercio electrónico: Estas se encuentran entre los contextos de texto alternativo más críticos en la web. Las personas ciegas dependen por completo del texto alternativo para entender qué están considerando comprar. Describir solo el nombre del producto es insuficiente. Incluye material, color, características visuales clave y cualquier variante que sea distinguible visualmente. Por ejemplo: alt='Slim-fit wool blazer in navy blue with gold buttons and notched lapels' es mucho más útil que alt='Blazer'.

Logotipos: Los logotipos nunca son decorativos. Requieren texto alternativo que incluya el nombre de la organización y cualquier lema o descriptor significativo que aparezca dentro de la imagen del logotipo. Si el logotipo también es un enlace, el texto alternativo debe describir su destino, como se comentó antes.

Infografías: Son notoriamente difíciles de manejar bien. Un solo atributo alt no puede soportar el peso informativo de una infografía compleja. El enfoque correcto es un texto alternativo breve a nivel de resumen (por ejemplo, alt='Infographic summarizing five steps of our onboarding process') combinado con una versión en texto estructurado de la misma información visible en la página.

Imágenes de personas: Incluir nombres cuando las personas están identificadas es útil, especialmente en contextos editoriales o de noticias. Describe lo que la persona está haciendo o lo que la imagen comunica, no solo su apariencia física. Evita descripciones que reduzcan a una persona a sus características demográficas.

Imágenes de fondo y CSS: Las imágenes aplicadas mediante background-image en CSS no tienen disponible un atributo alt, por lo que solo deben usarse con fines genuinamente decorativos. Si una imagen necesita comunicar significado, debe estar en el HTML como un elemento <img> con texto alternativo adecuado.

Integrar el texto alternativo en tu flujo de trabajo

Una de las razones por las que el texto alternativo sigue fallando a escala es que se trata como un pensamiento tardío de último paso: algo que un escáner automatizado detecta después del lanzamiento, lo que provoca un parche apresurado. La solución es adelantar el texto alternativo en tus flujos de trabajo de contenido y desarrollo.

Para los equipos de contenido, esto significa establecer una guía de estilo interna para texto alternativo que cubra tus tipos de imágenes más comunes. Si tu sitio publica imágenes de productos, imágenes destacadas de entradas de blog, fotos de eventos y gráficos de datos, cada categoría merece un estándar documentado con ejemplos de buenas y malas descripciones. Cuando quienes escriben y editan suben imágenes, deben pensar en el texto alternativo al mismo tiempo que piensan en los pies de foto y en la selección de imágenes.

Para las personas desarrolladoras, esto significa incorporar campos de texto alternativo en las plantillas del CMS y marcarlos como obligatorios —no opcionales— para los componentes de imagen no decorativos. Cuando un componente acepta una imagen, la interfaz debe solicitar texto alternativo y distinguir entre contextos informativos y decorativos. Evita rellenar automáticamente el atributo alt con el nombre del archivo de imagen o el texto del pie de foto, que son cosas diferentes con propósitos distintos.

Para las personas responsables de QA y cumplimiento, las herramientas de escaneo automatizado (incluidas las soluciones de superposición de accesibilidad como Accsible) pueden detectar a escala imágenes con atributos alt ausentes o vacíos, marcándolas en tiempo real. Pero las herramientas automatizadas no pueden evaluar si el texto alternativo existente es realmente significativo; ese juicio requiere una revisión humana. Incorpora verificaciones manuales aleatorias en tu cadencia de auditorías de accesibilidad e incluye la revisión de la calidad del texto alternativo en cualquier criterio de aceptación de nuevas funcionalidades que involucren imágenes.

Cuando la misma imagen se reutiliza en varias páginas o contextos, recuerda que el texto alternativo adecuado puede cambiar. Una foto de la sede de una empresa usada en una página de "Contáctanos" y en una página de "Nuestra cultura" puede requerir descripciones diferentes según lo que cada página intenta comunicar. Plataformas CMS como WordPress permiten sobrescribir el texto alternativo a nivel de entrada precisamente por esta razón.

Errores comunes que hay que evitar

Incluso los equipos que se toman en serio el texto alternativo cometen errores recurrentes. Estos son los patrones que vale la pena vigilar activamente:

• Usar el nombre del archivo como texto alternativo. Un texto alternativo como IMG_4521.jpg o hero-banner-v3-final.png es peor que inútil: señala activamente a las personas que usan lectores de pantalla que nadie pensó en ellas.
• Hacer que el texto alternativo sea idéntico al pie de foto adyacente. Los pies de foto y el texto alternativo sirven a audiencias y propósitos diferentes. Un pie de foto es contexto complementario para personas videntes; el texto alternativo sustituye a la imagen para quienes no pueden verla. Pueden solaparse, pero no deberían copiarse indistintamente.
• Agregar texto alternativo a todas las imágenes indiscriminadamente. Dar descripciones a imágenes decorativas obliga a las personas que usan lectores de pantalla a atravesar contenido irrelevante. La disciplina de decidir “¿esta imagen necesita una descripción y, si es así, cuál?” es tan importante como la propia redacción.
• Escribir descripciones vagas y sin contexto. Un texto alternativo como alt='man smiling' para una foto de tu CEO durante el lanzamiento de un producto dice casi nada sobre por qué la imagen está ahí o qué significa en contexto.
• Ignorar el texto alternativo en SVG. Los SVG en línea también necesitan nombres accesibles, normalmente mediante aria-label en el elemento <svg> o un elemento <title> como primer hijo, combinado con role='img'.

<!-- SVG with accessible name -->
<svg role='img' aria-labelledby='svg-title'>
  <title id='svg-title'>Quarterly revenue growth, Q1 to Q4 2024</title>
  <!-- SVG paths -->
</svg>

Conclusiones clave

• No todas las imágenes necesitan una descripción textual. Las imágenes decorativas deben usar alt='' para indicar a los lectores de pantalla que las omitan, pero nunca omitas por completo el atributo alt, o el lector de pantalla puede anunciar el nombre del archivo en su lugar.
• Mantén el texto alternativo por debajo de 125 caracteres para imágenes informativas; los lectores de pantalla pueden cortar cadenas más largas, y la concisión mejora la comprensión al escuchar. Para imágenes complejas, combina un breve resumen en el texto alternativo con una descripción completa en el cuerpo de la página.
• Describe la función, no solo la forma. Para imágenes enlazadas y funcionales, el texto alternativo debe decir a la persona usuaria qué ocurrirá o adónde irá, no cómo se ve la imagen. Para imágenes informativas, comunica el significado, no solo el contenido visual.
• Integra el texto alternativo en tu flujo de trabajo desde el principio, no como una corrección posterior al lanzamiento. Haz que sea un campo obligatorio en tu CMS, inclúyelo en las guías de estilo de contenido y añade la revisión de calidad a tu proceso de QA: las herramientas automatizadas detectan la ausencia de texto alternativo, pero las personas deben evaluar si es significativo.
• Las implicaciones legales y normativas son reales y van en aumento. La litigación bajo la ADA que cita la falta de texto alternativo se contó por miles en 2024, y la Accessibility Act de la UE ya está en vigor. Tratar el texto alternativo como una idea tardía no es una estrategia de cumplimiento viable.