Introducción

Texto alternativo para lectores de pantalla

22 de marzo de 20264 min de lectura

Ver contenido

Introducción

El texto alternativo (alt text) proporciona una descripción textual de las imágenes para usuarios que no pueden verlas. Esto incluye personas usando lectores de pantalla, aquellos con imágenes deshabilitadas y rastreadores de motores de búsqueda. El Criterio de Éxito 1.1.1 de WCAG 2.2 (Contenido No Textual) es un requisito de Nivel A—el estándar de accesibilidad más fundamental.

Escribir texto alternativo efectivo es tanto un arte como una ciencia. Requiere entender el propósito de la imagen en contexto y comunicar ese propósito de manera concisa a usuarios que no pueden verla.

¿Qué Es el Texto Alternativo?

El Atributo HTML

El texto alternativo se agrega a las imágenes usando el atributo alt:

<img src="grafico.png" alt="Gráfico de barras mostrando 40% de aumento en ventas Q3 2024">

Tipos de Imágenes y Su Texto Alternativo

Tipo de Imagen	Enfoque de Alt Text	Ejemplo
Informativa	Describir contenido y significado	“Ícono de advertencia rojo”
Funcional	Describir acción/destino	“Enviar formulario”
Decorativa	Usar alt vacío (alt=“”)	Patrones de fondo
Compleja	Alt breve + descripción larga	Gráficos, diagramas
Texto en imágenes	Incluir todo el texto visible	Logos, banners

Por Qué Importa el Texto Alternativo

Quién Se Beneficia

Usuarios de lectores de pantalla - Consumidores principales del alt text
Usuarios con conexiones lentas - Ven descripción antes de cargar imagen
Motores de búsqueda - Entienden contenido de imagen para indexación
Usuarios con imágenes deshabilitadas - Aún obtienen el significado

Beneficios SEO

Impacto SEO del Alt Text:
┌─────────────────────────────────────────────────────────┐
│ Rankings de Búsqueda de Imágenes → Mejor alt = más tráfico │
│ Contexto de Página → Ayuda a Google entender contenido     │
│ Eficiencia de Rastreo → Texto es más rápido de procesar    │
│ Puntuación de Accesibilidad → Afecta Core Web Vitals       │
└─────────────────────────────────────────────────────────┘

Cumplimiento Legal

El texto alternativo es requerido bajo:

WCAG 2.2 Nivel A (Criterio de Éxito 1.1.1)
ADA (Ley de Estadounidenses con Discapacidades)
Sección 508 (Requisitos federales de EE.UU.)
EN 301 549 (Estándar europeo de accesibilidad)

Errores Comunes de Texto Alternativo

1. Atributos Alt Faltantes

<!-- MAL: Sin atributo alt -->
<img src="producto.jpg">

<!-- BIEN: Texto alt descriptivo -->
<img src="producto.jpg" alt="Audífonos inalámbricos azules con cancelación de ruido">

2. Descripciones Redundantes

<!-- MAL: Redundante "imagen de" -->
<img src="equipo.jpg" alt="Imagen de nuestro equipo en la oficina">

<!-- BIEN: Descripción directa -->
<img src="equipo.jpg" alt="Nuestro equipo colaborando alrededor de una pizarra">

3. Relleno de Palabras Clave

<!-- MAL: Spam SEO -->
<img src="zapatos.jpg" alt="Comprar zapatos online mejores zapatos baratos oferta zapatos">

<!-- BIEN: Descripción natural -->
<img src="zapatos.jpg" alt="Zapatos oxford de cuero negro para hombre">

4. Descripciones Genéricas

<!-- MAL: No es útil -->
<img src="datos.png" alt="Gráfico">

<!-- BIEN: Transmite los datos -->
<img src="datos.png" alt="Gráfico de líneas mostrando crecimiento de usuarios de 10K a 50K en 12 meses">

5. Imágenes Decorativas Sin Alt Vacío

<!-- MAL: Imagen decorativa con descripción -->
<img src="divisor.png" alt="Línea divisoria decorativa">

<!-- BIEN: Alt vacío para imágenes decorativas -->
<img src="divisor.png" alt="">

Escribiendo Buen Texto Alternativo

El Árbol de Decisión

Pregúntate:
│
├─ ¿Es esta imagen puramente decorativa?
│  └─ SÍ → Usar alt=""
│
├─ ¿La imagen contiene texto?
│  └─ SÍ → Incluir todo el texto en alt
│
├─ ¿Es la imagen un enlace o botón?
│  └─ SÍ → Describir destino/acción
│
├─ ¿El texto circundante describe la imagen?
│  └─ SÍ → Usar alt breve o alt=""
│
└─ De lo contrario → Describir contenido y propósito

Principios de Buen Texto Alternativo

Sé conciso - Usualmente 125 caracteres o menos
Sé específico - Incluye detalles relevantes
Transmite propósito - ¿Por qué está esta imagen aquí?
No empieces con “Imagen de…” - Los lectores de pantalla anuncian imágenes
Considera contexto - La misma imagen puede necesitar diferente alt text en diferentes lugares

Ejemplos por Contexto

Producto de E-commerce:

<img src="chaqueta.jpg" alt="Chaqueta de senderismo impermeable para mujer en verde bosque, tallas XS-XL">

Artículo de Noticias:

<img src="protesta.jpg" alt="Miles de manifestantes reunidos en plaza central con carteles de acción climática">

Paso de Tutorial:

<img src="paso3.png" alt="Hacer clic en el botón azul 'Guardar' en la esquina superior derecha">

Logo de Empresa:

<img src="logo.png" alt="Acme Corporation">

Probando el Texto Alternativo

Testing con Lectores de Pantalla

Prueba con lectores de pantalla reales:

VoiceOver (macOS/iOS)
NVDA (Windows, gratuito)
JAWS (Windows)

Herramientas Automatizadas

Herramienta	Qué Verifica
axe DevTools	Alt faltante, alt vacío en imágenes funcionales
WAVE	Presencia de alt text y sugerencias de calidad
Lighthouse	Accesibilidad de imágenes en auditorías

Prueba Manual Rápida

Deshabilita imágenes en tu navegador
¿Puedes entender el contenido de la página?
¿La descripción de cada imagen tiene sentido?

Referencia Rápida

Hacer y No Hacer

Hacer	No Hacer
Describir el propósito de la imagen	Empezar con “Imagen de…”
Ser conciso pero completo	Rellenar con palabras clave
Usar alt vacío para imágenes decorativas	Dejar el atributo alt faltante
Incluir texto que aparece en imágenes	Usar genérico “foto” o “imagen”
Probar con lectores de pantalla	Asumir que tu alt text es suficiente

Implementación

Categorías de Imágenes y Técnicas

El Árbol de Decisión WAI para Imágenes

┌─────────────────────────────────────────────────────────┐
│        DECISIÓN DE ACCESIBILIDAD DE IMÁGENES WAI       │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  1. ¿La imagen contiene texto?                         │
│     └─ SÍ → Incluir texto en alt                       │
│                                                         │
│  2. ¿La imagen se usa en un enlace o botón?           │
│     └─ SÍ → Describir función/destino                  │
│                                                         │
│  3. ¿La imagen contribuye significado al contexto?    │
│     └─ SÍ → Describir contenido informativo           │
│                                                         │
│  4. ¿La imagen es puramente decorativa?               │
│     └─ SÍ → Usar alt nulo (alt="")                    │
│                                                         │
│  5. ¿La imagen es compleja (gráficos, diagramas)?     │
│     └─ SÍ → Proporcionar descripción larga            │
│                                                         │
└─────────────────────────────────────────────────────────┘

Implementación por Tipo de Imagen

1. Imágenes Informativas

Imágenes que transmiten información o conceptos:

<!-- Imagen informativa simple -->
<img
  src="icono-advertencia.png"
  alt="Advertencia: Esta acción no se puede deshacer"
>

<!-- Foto con contexto -->
<img
  src="edificio-oficinas.jpg"
  alt="Edificio de oficinas moderno de cristal con logo de empresa en entrada"
>

<!-- Visualización de datos -->
<img
  src="tendencia.png"
  alt="Flecha de tendencia ascendente indicando crecimiento"
>

2. Imágenes Decorativas

Imágenes que no agregan contenido informativo:

<!-- Método 1: Atributo alt vacío (preferido) -->
<img src="borde-decorativo.png" alt="">

<!-- Método 2: Fondo CSS (verdaderamente decorativo) -->
<style>
  .hero {
    background-image: url('patron-abstracto.png');
  }
</style>

<!-- Método 3: Role presentation (ARIA) -->
<img src="adorno.svg" alt="" role="presentation">

¿Cuándo es una imagen decorativa?

Patrones y texturas de fondo
Elementos espaciadores o de diseño
Íconos junto a texto que dice lo mismo
Imágenes de ambiente que no agregan información

3. Imágenes Funcionales

Imágenes usadas como enlaces, botones o controles:

<!-- Logo enlazado -->
<a href="/">
  <img src="logo.png" alt="Nombre de Empresa - Ir a inicio">
</a>

<!-- Botón de imagen -->
<button type="submit">
  <img src="icono-buscar.svg" alt="Buscar">
</button>

<!-- Enlace de imagen -->
<a href="/carrito">
  <img src="icono-carrito.svg" alt="Carrito de compras (3 artículos)">
</a>

<!-- Botón de imprimir -->
<button onclick="window.print()">
  <img src="imprimir.svg" alt="Imprimir esta página">
</button>

4. Imágenes de Texto

Imágenes que contienen texto legible:

<!-- Logo con texto -->
<img src="logo.png" alt="Acme Corporation">

<!-- Banner con mensaje -->
<img
  src="banner-oferta.jpg"
  alt="Ofertas de Verano: 50% de descuento en todos los artículos hasta el 31 de agosto"
>

<!-- Encabezado estilizado -->
<img
  src="texto-bienvenida.png"
  alt="Bienvenido a Nuestra Tienda"
>

Mejor Práctica: Usa texto real con estilos CSS en lugar de imágenes de texto cuando sea posible.

5. Imágenes Complejas

Gráficos, diagramas, tablas e infografías:

<!-- Método 1: Alt breve + atributo longdesc -->
<img
  src="organigrama.png"
  alt="Organigrama mostrando estructura de la empresa"
  longdesc="descripcion-organigrama.html"
>

<!-- Método 2: Alt breve + descripción de texto adyacente -->
<figure>
  <img
    src="grafico-ventas.png"
    alt="Gráfico de ventas trimestrales - detalles en tabla abajo"
  >
  <figcaption>
    <details>
      <summary>Descripción de datos de ventas</summary>
      <p>Q1: $1.2M, Q2: $1.5M, Q3: $1.8M, Q4: $2.1M.
         Crecimiento total del 75% año tras año.</p>
    </details>
  </figcaption>
</figure>

<!-- Método 3: aria-describedby -->
<img
  src="flujo-proceso.png"
  alt="Proceso de checkout en 5 pasos"
  aria-describedby="descripcion-proceso"
>
<div id="descripcion-proceso" class="sr-only">
  Paso 1: Agregar artículos al carrito.
  Paso 2: Ingresar dirección de envío.
  Paso 3: Seleccionar método de envío.
  Paso 4: Ingresar información de pago.
  Paso 5: Revisar y confirmar pedido.
</div>

6. Grupos de Imágenes

Múltiples imágenes transmitiendo una sola pieza de información:

<!-- Calificación por estrellas -->
<div role="img" aria-label="Calificación: 4 de 5 estrellas">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-llena.svg" alt="">
  <img src="estrella-vacia.svg" alt="">
</div>

<!-- Colección de imágenes -->
<figure role="group" aria-label="Vistas del producto">
  <img src="frente.jpg" alt="Vestido azul - vista frontal">
  <img src="atras.jpg" alt="Vestido azul - vista trasera">
  <img src="detalle.jpg" alt="Vestido azul - detalle de tela">
</figure>

7. Mapas de Imagen

Regiones clickeables dentro de una imagen:

<img
  src="plano-oficina.png"
  alt="Plano de oficina con departamentos clickeables"
  usemap="#mapa-plano"
>
<map name="mapa-plano">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="/ventas"
    alt="Departamento de Ventas"
  >
  <area
    shape="rect"
    coords="100,0,200,100"
    href="/ingenieria"
    alt="Departamento de Ingeniería"
  >
  <area
    shape="rect"
    coords="200,0,300,100"
    href="/rrhh"
    alt="Recursos Humanos"
  >
</map>

Implementación Específica por Framework

React/Next.js

// Imagen estándar con alt
function ProductImage({ product }) {
  return (
    <img
      src={product.imageUrl}
      alt={`${product.name} - ${product.color} ${product.category}`}
    />
  );
}

// Componente Image de Next.js
import Image from 'next/image';

function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Equipo colaborando en proyecto de diseño"
      width={1200}
      height={600}
      priority
    />
  );
}

// Imagen decorativa en React
function DecorativeDivider() {
  return (
    <img
      src="/divisor.svg"
      alt=""
      role="presentation"
      aria-hidden="true"
    />
  );
}

Vue.js

<template>
  <!-- Imagen informativa -->
  <img
    :src="product.image"
    :alt="`${product.name} - ${product.description}`"
  />

  <!-- Imagen decorativa -->
  <img
    src="/decorativo.svg"
    alt=""
    aria-hidden="true"
  />

  <!-- Imagen compleja con descripción -->
  <figure>
    <img
      :src="chart.src"
      :alt="chart.briefDescription"
      :aria-describedby="`chart-desc-${chart.id}`"
    />
    <figcaption :id="`chart-desc-${chart.id}`">
      {{ chart.longDescription }}
    </figcaption>
  </figure>
</template>

Accesibilidad SVG

<!-- SVG decorativo -->
<svg aria-hidden="true" focusable="false">
  <!-- ... -->
</svg>

<!-- SVG informativo -->
<svg role="img" aria-labelledby="svg-titulo svg-desc">
  <title id="svg-titulo">Estadísticas de Usuarios</title>
  <desc id="svg-desc">Gráfico de barras mostrando crecimiento de usuarios en 12 meses</desc>
  <!-- ... -->
</svg>

<!-- SVG interactivo -->
<svg role="img" aria-label="Menú de navegación">
  <!-- ... -->
</svg>

Testing de Alt Text

Testing Automatizado

// Cypress con axe-core
describe('Accesibilidad de Imágenes', () => {
  it('debe tener alt text apropiado en todas las imágenes', () => {
    cy.visit('/');
    cy.injectAxe();
    cy.checkA11y(null, {
      rules: {
        'image-alt': { enabled: true },
        'input-image-alt': { enabled: true },
        'area-alt': { enabled: true }
      }
    });
  });
});

// Jest con jest-axe
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('imágenes tienen alt text', async () => {
  const html = render(<ProductPage />);
  const results = await axe(html.container);
  expect(results).toHaveNoViolations();
});

Checklist de Testing Manual

## Checklist de Auditoría de Alt Text

### Para Cada Imagen:
- [ ] Tiene atributo alt (nunca faltante)
- [ ] Alt text describe propósito, no apariencia
- [ ] Alt es conciso (menos de 125 caracteres cuando sea posible)
- [ ] Imágenes decorativas usan alt=""
- [ ] Imágenes enlazadas describen destino
- [ ] Imágenes complejas tienen descripciones largas

### Verificaciones a Nivel de Página:
- [ ] Deshabilitar imágenes - ¿es entendible el contenido?
- [ ] Test con lector de pantalla - ¿las imágenes tienen sentido?
- [ ] Sin alt text duplicado en diferentes imágenes
- [ ] Sin imágenes de texto (usar texto real en su lugar)

Comandos de Testing con Lectores de Pantalla

VoiceOver (macOS):
- VO + Command + I → Listar todas las imágenes en página
- VO + Flecha Derecha → Navegar al siguiente elemento

NVDA (Windows):
- G → Saltar a siguiente gráfico
- Shift + G → Saltar a gráfico anterior
- NVDA + F7 → Lista de elementos (seleccionar Imágenes)

JAWS (Windows):
- G → Saltar a siguiente gráfico
- Shift + G → Saltar a gráfico anterior
- Insert + F7 → Lista de gráficos

Consideraciones de CMS y Plataforma

WordPress

// Forzar requisito de alt text
add_filter('attachment_fields_to_edit', function($fields, $post) {
    $fields['alt_text_required'] = array(
        'label' => 'Alt Text (Requerido)',
        'input' => 'text',
        'value' => get_post_meta($post->ID, '_wp_attachment_image_alt', true),
        'helps' => 'Describe esta imagen para accesibilidad'
    );
    return $fields;
}, 10, 2);

Shopify

{% comment %} Imagen de producto con alt dinámico {% endcomment %}
<img
  src="{{ product.featured_image | img_url: 'large' }}"
  alt="{{ product.featured_image.alt | default: product.title }}"
  loading="lazy"
>

Patrones Comunes

Imágenes de Productos E-commerce

<!-- Imagen principal de producto -->
<img
  src="producto-principal.jpg"
  alt="Chaqueta de mezclilla azul, vista frontal, tallas XS-XXL"
>

<!-- Galería de miniaturas -->
<div role="group" aria-label="Galería de imágenes del producto">
  <button aria-pressed="true">
    <img src="thumb-1.jpg" alt="Vista frontal">
  </button>
  <button aria-pressed="false">
    <img src="thumb-2.jpg" alt="Vista trasera">
  </button>
  <button aria-pressed="false">
    <img src="thumb-3.jpg" alt="Vista lateral mostrando bolsillos">
  </button>
</div>

Avatares de Usuario

<!-- Con nombre de usuario -->
<img
  src="avatar.jpg"
  alt=""
  aria-hidden="true"
>
<span>Juan Pérez</span>

<!-- Avatar independiente -->
<img
  src="avatar.jpg"
  alt="Foto de perfil de Juan Pérez"
>

Íconos con Texto

<!-- Ícono + texto visible (ícono es decorativo) -->
<button>
  <img src="icono-guardar.svg" alt="" aria-hidden="true">
  <span>Guardar Documento</span>
</button>

<!-- Solo ícono (ícono es funcional) -->
<button aria-label="Guardar documento">
  <img src="icono-guardar.svg" alt="">
</button>

Guías de Calidad

Longitud del Alt Text

Contexto	Longitud Recomendada	Ejemplo
Imagen simple	10-50 caracteres	“Ícono de advertencia rojo”
Foto de producto	50-100 caracteres	“Audífonos inalámbricos azules con cancelación de ruido”
Gráfico complejo	Alt breve + descripción larga	“Gráfico de ventas - ver tabla abajo para datos”
Decorativa	0 caracteres	alt=“”

Escribiendo Alt Text de Calidad

Buenos Ejemplos:

<img alt="Gráfico mostrando 150% de aumento de ingresos de enero a diciembre 2024">
<img alt="Dra. Sara Chen presentando en la conferencia anual de tecnología">
<img alt="Paso 3: Click en el botón azul Enviar en la esquina superior derecha">

Malos Ejemplos:

<img alt="gráfico">  <!-- Muy vago -->
<img alt="imagen">  <!-- Sin significado -->
<img alt="foto de persona">  <!-- ¿Quién? ¿Haciendo qué? -->
<img alt="IMG_2847.jpg">  <!-- Nombre de archivo, no descripción -->

Referencias

W3C - WCAG 2.2 SC 1.1.1 Contenido No Textual
W3C - Tutorial de Imágenes WAI
WebAIM - Texto Alternativo
MDN - Imágenes en HTML
W3C - Patrón de Imágenes ARIA
Deque - Accesibilidad de Imágenes

Introducción

¿Qué Es el Texto Alternativo?

El Atributo HTML

Tipos de Imágenes y Su Texto Alternativo

Por Qué Importa el Texto Alternativo

Quién Se Beneficia

Beneficios SEO

Cumplimiento Legal

Errores Comunes de Texto Alternativo

1. Atributos Alt Faltantes

2. Descripciones Redundantes

3. Relleno de Palabras Clave

4. Descripciones Genéricas

5. Imágenes Decorativas Sin Alt Vacío

Escribiendo Buen Texto Alternativo

El Árbol de Decisión

Principios de Buen Texto Alternativo

Ejemplos por Contexto

Probando el Texto Alternativo

Testing con Lectores de Pantalla

Herramientas Automatizadas

Prueba Manual Rápida

Referencia Rápida

Hacer y No Hacer

Implementación

Categorías de Imágenes y Técnicas

El Árbol de Decisión WAI para Imágenes

Implementación por Tipo de Imagen

1. Imágenes Informativas

2. Imágenes Decorativas

3. Imágenes Funcionales

4. Imágenes de Texto

5. Imágenes Complejas

6. Grupos de Imágenes

7. Mapas de Imagen

Implementación Específica por Framework

React/Next.js

Vue.js

Accesibilidad SVG

Testing de Alt Text

Testing Automatizado

Checklist de Testing Manual

Comandos de Testing con Lectores de Pantalla

Consideraciones de CMS y Plataforma

WordPress

Shopify

Patrones Comunes

Imágenes de Productos E-commerce

Avatares de Usuario

Íconos con Texto

Guías de Calidad

Longitud del Alt Text

Escribiendo Alt Text de Calidad

Artículos Relacionados

Referencias

Artículos relacionados

En la misma categoría

Rastreabilidad de IA

Guía de Gestión de Rastreadores IA

Texto alt para SEO: cómo escribirlo por tipo de imagen

Optimización de alt text: keywords, automatización y auditoría

Etiquetas ARIA

Headers de Caché HTTP