Cómo escribir texto alternativo que funcione (con ejemplos)

La falta de texto alternativo, o un texto poco útil, es uno de los fallos de accesibilidad más comunes de la web y uno de los más fáciles de corregir. Un buen texto alternativo permite que las personas que usan lectores de pantalla entiendan tus imágenes, y también ayuda a los buscadores y a los asistentes de IA a entender tus páginas. Esta guía te enseña a escribir texto alternativo que de verdad ayuda, con ejemplos que puedes copiar.

¿Qué es el texto alternativo?

El texto alternativo (o texto alt) es una descripción breve que se guarda en el atributo alt de una imagen. Los lectores de pantalla lo leen en voz alta, los navegadores lo muestran cuando una imagen no se carga y los buscadores lo usan para entender qué muestra la imagen. Lo exige el criterio de conformidad 1.1.1 de las WCAG, Contenido no textual, un requisito de nivel A, por lo que forma parte de cualquier conversación sobre el cumplimiento de la ADA y de la EAA.

Cinco reglas para un buen texto alternativo

1. Describe el propósito, no solo la imagen. Pregúntate: ¿por qué está aquí esta imagen? Escribe la información que aporta a la página.
2. Sé conciso. Normalmente basta una frase corta o menos. Las explicaciones largas van en el texto que rodea la imagen.
3. Evita “imagen de” o “foto de”. Los lectores de pantalla ya anuncian que se trata de una imagen.
4. Incluye el texto que aparece en la imagen. Si un gráfico contiene palabras, el texto alternativo también debe contenerlas.
5. No rellenes con palabras clave. Escribe para las personas. Las descripciones naturales y precisas son también las que premian los buscadores.

Ejemplos de texto alternativo

Imágenes informativas

Aportan información al contenido.

• Débil: alt="senderista"
• Mejor: alt="Senderista con chaqueta roja en una cresta rocosa al amanecer"

Imágenes de producto

Los compradores necesitan los detalles que les ayudan a elegir.

• Débil: alt="chaqueta"
• Mejor: alt="Chaqueta acolchada blanca de mujer con capucha, vista frontal"

Imágenes funcionales: enlaces y botones

Cuando una imagen es un enlace o un botón, describe lo que hace, no su aspecto.

• Logotipo que enlaza a la página de inicio: alt="Inicio de Reguweb"
• Botón de búsqueda con lupa: alt="Buscar"
• Icono de bolsa de compras: alt="Ver carrito, 2 artículos"

Imágenes de texto

Repite el texto exactamente. Por ejemplo, un banner que dice “Rebajas de primavera: 20 % de descuento en todas las botas” debería tener ese mismo texto como texto alternativo.

Gráficos e infografías

Incluye un resumen breve en el texto alternativo y coloca los datos completos en un texto cercano o en una tabla.

• alt="Gráfico de barras: el tráfico del sitio web creció un 40 % de enero a junio", seguido de una tabla de datos en la página

Imágenes decorativas

Las texturas de fondo, los separadores y las ilustraciones meramente decorativas deben llevar un atributo alt vacío, alt="", para que los lectores de pantalla las omitan. No elimines el atributo por completo: sin él, algunos lectores de pantalla leen el nombre del archivo, por ejemplo “IMG guion bajo 4032 punto jpeg”.

Imágenes con pie de foto

Si el pie de foto ya describe la imagen por completo, mantén el texto alternativo breve y no repitas el pie de foto palabra por palabra.

Cómo añadir texto alternativo en las plataformas más comunes

• WordPress: selecciona el bloque de imagen y rellena “Texto alternativo” en la barra lateral, o edítalo una sola vez en la Biblioteca de medios. Consulta nuestra lista de verificación de accesibilidad para WordPress para ver más correcciones.
• Elementor: define el texto alternativo de la imagen en la Biblioteca de medios; Elementor lo usa automáticamente.
• Shopify: abre el producto, haz clic en la imagen y elige “Añadir texto alternativo”.
• HTML: <img src="trail.jpg" alt="Senderista en una cresta al amanecer">

Texto alternativo, SEO y búsqueda con IA

Los buscadores no pueden ver las imágenes como lo hacen las personas, así que dependen del texto alternativo y del contenido circundante para entenderlas. Un texto alternativo descriptivo ayuda a que tus imágenes aparezcan en la búsqueda de imágenes y aporta contexto al resto de la página. Los asistentes de IA que leen tu sitio para responder preguntas se benefician de la misma claridad, y por eso la accesibilidad y el SEO suelen ir de la mano.

Cómo corregir el texto alternativo a gran escala

En un sitio con cientos o miles de imágenes, escribir el texto alternativo una por una es lento. Un flujo de trabajo práctico:

1. Escanea tu sitio para encontrar todas las imágenes con texto alternativo ausente, vacío o basado en el nombre del archivo.
2. Marca las imágenes decorativas para que reciban alt="".
3. Genera borradores de descripciones con IA para el resto.
4. Haz que una persona revise los borradores para comprobar su exactitud y su contexto, sobre todo en las imágenes de producto y las funcionales.
5. Publica y supervisa las nuevas subidas para que el problema no vuelva a aparecer.

Preguntas frecuentes

¿Qué extensión debe tener el texto alternativo?

No hay un límite fijo, pero procura que sea una frase corta o menos. Si una imagen necesita una explicación larga, ponla en el texto de la página y mantén breve el texto alternativo.

¿Todas las imágenes necesitan texto alternativo?

Todas las imágenes necesitan un atributo alt. Las imágenes informativas y funcionales necesitan una descripción; las decorativas necesitan uno vacío, alt="".

¿Puede la IA escribir el texto alternativo por mí?

La IA puede producir buenos primeros borradores con rapidez, pero no sabe por qué elegiste una imagen ni qué hace un enlace. Una revisión humana rápida mantiene el resultado preciso.

Encuentra y corrige el texto alternativo que falta de forma automática

Reguweb escanea cada página en busca de texto alternativo ausente o poco útil, genera descripciones con IA que puedes revisar y aprobar con un clic, y sigue supervisando el contenido nuevo. Haz un escaneo gratuito para ver cuántas imágenes de tu sitio necesitan atención, o empieza una prueba gratuita de 14 días.