29 de octubre de 2026
Texto alternativo en imágenes: el árbol de decisión del W3C, caso por caso
El texto alternativo de una imagen es el texto que la sustituye para las personas que no pueden verla: puede leerse en voz alta con una síntesis de voz, mostrarse como texto o convertirse a braille. En una imagen HTML se escribe en el atributo alt del elemento img. La dificultad real no es dónde escribirlo, sino qué escribir: una descripción, la función de un enlace, el texto que contiene la imagen o nada en absoluto (alt vacío). Para resolverlo, el W3C propone un árbol de decisión de cinco preguntas que se plantean en orden. En este artículo se lo presentamos paso a paso, lo completamos con ejemplos de la página «Understanding 1.1.1» del W3C y repasamos los errores que el W3C recoge como fallos del criterio 1.1.1 «Contenido no textual» en su documentación de apoyo a las WCAG.
Qué exigen las WCAG al texto alternativo de una imagen
El criterio de conformidad 1.1.1 «Contenido no textual» es de nivel A. Establece que todo contenido no textual que se presenta al usuario tiene una alternativa textual que cumple el mismo propósito, salvo en algunas situaciones concretas. Su objetivo, resumido por el W3C: que la información no textual esté disponible para más personas.
¿Por qué texto? Porque puede presentarse a través de cualquier modalidad sensorial: visual, auditiva o táctil. Quien no puede ver una foto puede escuchar su alternativa textual mediante síntesis de voz; una persona sordociega puede leer ese texto en braille. El W3C añade que las alternativas textuales también pueden ayudar a algunas personas con dificultades para entender el significado de fotos, dibujos, gráficos o animaciones, y que permiten buscar el contenido no textual y reutilizarlo.
El criterio prevé casos particulares que puede encontrar en un sitio web:
- Controles y entradas de datos (por ejemplo, una imagen usada como botón de envío): deben tener un nombre que describa su propósito.
- Medios tempodependientes, pruebas o ejercicios que no serían válidos en texto y contenidos pensados principalmente para crear una experiencia sensorial específica: la alternativa ofrece como mínimo una identificación descriptiva.
- CAPTCHA: la alternativa identifica y describe su propósito, y se ofrecen otras formas de CAPTCHA que usan sentidos distintos para atender a diferentes discapacidades.
- Decoración pura, formato visual o contenido que no se presenta al usuario: debe implementarse de forma que las tecnologías de apoyo puedan ignorarlo.
Cómo elegir el texto alternativo de imágenes con el árbol del W3C
El árbol de decisión del W3C describe cómo usar el atributo alt del elemento img según la situación. Plantee las preguntas en orden: en las cuatro primeras, un «sí» le da la pauta que debe seguir; un «no» le lleva a la siguiente.
- 1. ¿La imagen contiene texto? Si ese texto también aparece como texto real cerca, o solo está ahí por efecto visual: alt vacío (imagen decorativa). Si el texto tiene una función concreta, por ejemplo un icono: el alt comunica esa función (imagen funcional). Si el texto de la imagen no aparece en ningún otro lugar: el alt recoge ese texto (imagen de texto).
- 2. ¿La imagen se usa en un enlace o un botón, y sería difícil o imposible entender qué hace ese enlace o botón sin ella? Si es así: el alt indica el destino del enlace o la acción que se realiza (imagen funcional).
- 3. ¿La imagen aporta significado a la página o al contexto? Si es una ilustración sencilla o una fotografía: una breve descripción que transmita ese significado (imagen informativa). Si es un gráfico de datos o una información compleja: incluya esa información en otro lugar de la página (imagen compleja). Si muestra un contenido redundante con texto real cercano: alt vacío.
- 4. ¿La imagen es puramente decorativa o no está destinada a los usuarios? Si es así: alt vacío (imagen decorativa).
- 5. ¿Su caso no aparece o no tiene claro qué texto escribir? El árbol no cubre todos los casos: consulte el tutorial completo de imágenes del W3C.
Imágenes informativas, funcionales y complejas: ejemplos
Los ejemplos de la página «Understanding 1.1.1» muestran que un buen texto alternativo depende del contexto, no solo de lo que representa la imagen. Las alternativas citadas están traducidas del inglés, con el original entre paréntesis cuando es breve.
La misma imagen, dos alternativas. Una imagen del mundo enlaza, en un sitio de viajes, con la sección de viajes internacionales: su alternativa es «Viajes internacionales» (International Travel). La misma imagen, usada como enlace en la web de una universidad, tiene como alternativa «Campus internacionales» (International Campuses). Cuando la imagen es lo que permite entender un enlace, lo que cuenta es el destino. Del mismo modo, la miniatura de la portada de un periódico que enlaza con la página de inicio del «Smallville Times» tiene simplemente como alternativa «Smallville Times».
La misma foto, dos niveles de detalle. En una noticia sobre una cumbre internacional, la foto de dos líderes estrechándose la mano tiene como alternativa «El presidente X del país X estrecha la mano del primer ministro Y del país Y». En un sitio que analiza las sutilezas de las relaciones diplomáticas, la misma foto tiene una primera alternativa más precisa, que añade la fecha («… el 2 de enero de 2009»), completada con una descripción de la sala, de las expresiones de los líderes y de las demás personas presentes. Esa descripción puede figurar en la misma página o en un archivo asociado a la imagen mediante un enlace u otro mecanismo programático estándar.
Un gráfico de datos. Para un gráfico de barras que compara las ventas de junio, julio y agosto, la etiqueta corta dice «Figura 1 – Ventas de junio, julio y agosto» (Figure one - Sales in June, July and August). Una descripción más larga indica el tipo de gráfico y ofrece un resumen general de los datos, las tendencias y sus implicaciones, comparable a lo que muestra el gráfico; cuando es posible y práctico, los datos se ofrecen en una tabla.
Una imagen interactiva. Para el plano de una planta de un edificio en el que se puede seleccionar cada sala, la alternativa corta describe la imagen y su función: «Plano del edificio. Seleccione una sala para obtener más información.» (Building floor plan. Select a room for more information.)
Imágenes decorativas: cuándo usar un alt vacío
Hay contenido no textual que no está pensado para que el usuario lo vea o lo entienda. El W3C cita como ejemplos las imágenes transparentes que sirven para desplazar texto, una imagen invisible que mide estadísticas de uso o una voluta decorativa en una esquina que no transmite ninguna información. Estas imágenes no deben describirse, pero tampoco deben dejarse sin marcar.
Poner texto alternativo en estos elementos solo distrae a quienes usan lectores de pantalla. Pero no marcarlos en absoluto les deja preguntándose qué se han perdido, aunque en realidad no se han perdido nada. Por eso el criterio exige implementarlos de forma que las tecnologías de apoyo puedan ignorarlos; entre las técnicas que recoge el W3C para este caso figuran un alt vacío y sin atributo title en el elemento img, o la inserción de la imagen decorativa mediante CSS. Atención: nunca transmita información únicamente mediante una imagen de fondo CSS; es un fallo documentado del criterio (F3).
Errores de texto alternativo documentados como fallos
En su página «Understanding 1.1.1», el W3C recoge fallos del criterio. Son los malos ejemplos que conviene buscar al auditar sus imágenes:
- Omitir el atributo alt o la alternativa textual en elementos img, area e input de tipo image (F65).
- Usar como alternativa un texto que no lo es, por ejemplo un nombre de archivo o un texto de relleno (F30).
- Dar un alt no vacío, como alt="spacer" o alt="image", a una imagen que debería ignorarse (F39).
- No marcar en HTML una imagen decorativa de forma que las tecnologías de apoyo puedan ignorarla (F38).
- Transmitir información únicamente mediante imágenes de fondo CSS (F3).
- Omitir en la alternativa una información que transmiten las diferencias de color de la imagen (F13).
- No actualizar la alternativa cuando cambia el contenido no textual (F20).
- Usar arte ASCII o caracteres de aspecto similar para representar texto, sin alternativa textual (F72, F71).
- Ofrecer una descripción larga que no cumple el mismo propósito, o que no presenta la misma información que la imagen (F67).
Cómo revisar el texto alternativo de sus imágenes
Para cada imagen de una página, aplique el árbol de decisión y compare el resultado con los fallos anteriores. En la práctica: localice las imágenes sin atributo alt, las que tienen como alt un nombre de archivo y las decorativas que se han descrito; después revise las imágenes dentro de enlaces y botones y pregúntese si la alternativa anuncia el destino o la acción. En los gráficos, compruebe que existe una descripción larga, en la página o en otro lugar al que se llega con un enlace situado junto a la imagen, y, si es posible, una tabla con los datos.
El W3C recuerda además que la alternativa debería coincidir con el idioma del contenido original, normalmente el idioma por defecto de la página. Puede empezar con un test gratuito de su sitio en Conformly y activar después la supervisión continua para detectar las nuevas imágenes publicadas sin alternativa.
Preguntas frecuentes
¿Cómo escribir un buen texto alternativo para una imagen?
Siga el orden del árbol del W3C. Si la imagen contiene texto que no aparece en otro lugar, use ese texto. Si está en un enlace o un botón y sin ella no se entendería qué hace, describa el destino o la acción. Si aporta significado y es una ilustración sencilla o una foto, dé una breve descripción que transmita ese significado en su contexto; si es un gráfico de datos o una información compleja, ofrezca esa información en otro lugar de la página; si solo repite texto real cercano, deje el alt vacío. Si es puramente decorativa, deje también el alt vacío.
¿Cuándo hay que dejar el alt vacío?
Según el árbol de decisión del W3C: cuando el texto de la imagen ya aparece como texto real cerca, cuando ese texto solo está por efecto visual, cuando la imagen es redundante con texto cercano y cuando la imagen es puramente decorativa o no está destinada a los usuarios.
¿Se puede quitar el atributo alt de una imagen decorativa?
No. Omitir el atributo alt en un elemento img es un fallo documentado del criterio 1.1.1 (F65). Una imagen decorativa debe marcarse para que las tecnologías de apoyo la ignoren, por ejemplo con un alt vacío y sin atributo title, o insertarse mediante CSS.
¿Qué texto alternativo poner a un gráfico o una imagen compleja?
Una alternativa corta que identifique el gráfico, completada con una descripción larga que indique el tipo de gráfico y resuma los datos, las tendencias y sus implicaciones de forma comparable al gráfico, situada en otro lugar de la página o en otra ubicación enlazada junto a la imagen. Cuando sea posible, ofrezca los datos en una tabla.
¿Se puede usar el nombre del archivo como texto alternativo?
No. Usar un nombre de archivo o un texto de relleno como alternativa es un fallo documentado del criterio 1.1.1 (F30), igual que un alt del tipo «image» o «spacer» en una imagen que debería ignorarse (F39).
Más sobre el tema en Conformly
Fuentes
Este artículo se basa en las fuentes oficiales citadas al final de la página.