Texto Alternativo

Sintaxis HTML

• • Atributo obligatorio para validación
• • Debe ser descriptivo y conciso
• • Longitud recomendada: 80-125 caracteres

Imágenes Decorativas

• • Alt vacío para imágenes decorativas
• • Ignorado por lectores de pantalla
• • Mantiene validación HTML

Imágenes Funcionales

• • Describe la función, no solo la imagen
• • Incluye el propósito de la interacción
• • Prioritario para conversiones

✓ Recomendado

• •Ser específico y descriptivo
• •Incluir keywords relevantes
• •Mantener brevedad (80-125 caracteres)
• •Usar alt=»» para imágenes decorativas
• •Describir la función en imágenes interactivas

✕ Evitar

• •Iniciar con «Imagen de…» o «Foto de…»
• •Keyword stuffing
• •Descripciones genéricas
• •Usar nombre de archivo como alt
• •Omitir el atributo alt

Búsqueda de Imágenes

• •Mejor clasificación en Google Images
• •Mayor visibilidad en búsqueda visual
• •Tráfico específico de imágenes

Relevancia Semántica

• •Enriquece el contexto temático
• •Refuerza keywords principales
• •Mejora la comprensión de contenido

E-commerce

• •Mayor CTR en búsquedas de productos
• •Refuerzo de long-tail keywords
• •Mejor experiencia de compra

Descriptivo

Ideal para: Fotografías de stock, imágenes informativas y representativas

Funcional

Ideal para: Botones, iconos, CTAs y elementos interactivos

Informativo

Ideal para: Gráficos, infografías, tablas y datos visuales

Producto E-commerce

Ideal para: Imágenes de productos en tiendas online

Branding

Ideal para: Logotipos, marcas y elementos de identidad corporativa

Decorativo (Alt vacío)

Ideal para: Separadores, fondos, patrones y elementos puramente estéticos

Validación

• • WAVE Web Accessibility Tool
• • HTML Validator W3C
• • Lighthouse Accessibility

Automatización

• • Alt Text Generator API
• • Plugins CMS (WordPress, Shopify)
• • AI Image Recognition Tools

Testing

• • Screen Reader Simulators
• • Image Disabled Browsers
• • Contrast Checkers

❌ Descripción Incorrecta

alt="IMG_2367.jpg"
alt="imagen"
alt="foto de producto"

Falta de descripción o uso del nombre de archivo

✓ Descripción Correcta

alt="Mujer joven con cabello castaño"
alt="Tablet Samsung Galaxy Tab S7 color negro frontal"
alt="Gráfico de tendencias de venta 2023-2024"

Descripciones específicas, relevantes y descriptivas

ARIA Labels

<img src="chart.jpg" alt="" aria-labelledby="chart-description">
<div id="chart-description">
    Gráfico detallado mostrando el crecimiento de ventas 
    en los últimos 4 trimestres con un incremento del 25%.
</div>

• •Alternativa para descripciones largas
• •Complementa al atributo alt

Descripciones Largas

<figure>
    <img src="infografia.jpg" 
         alt="Resumen de proceso productivo" 
         longdesc="descripcion-infografia.html">
    <figcaption>Infografía del ciclo productivo</figcaption>
</figure>

• •Para imágenes complejas
• •Compatible con descripciones extensas

Responsive Images

<picture>
    <source media="(max-width: 600px)" srcset="imagen-small.jpg">
    <source media="(max-width: 1200px)" srcset="imagen-medium.jpg">
    <img src="imagen-large.jpg" alt="Descripción completa de la imagen">
</picture>

El alt text debe ser consistente en todas las versiones

Mejores Prácticas Mobile

• •Optimizar carga con lazy loading
• •Asegurar texto alternativo en todas las versiones
• •Mantener consistencia en todas las resoluciones
• •Priorizar información esencial en la descripción

CASO 1

E-commerce de Moda

Optimización de alt text en 5,000+ imágenes de productos

• •+35% en tráfico orgánico de búsqueda de imágenes
• •+22% tasa de conversión
• •+42% en visibilidad de productos específicos

CASO 2

Blog de Contenidos

Implementación de estrategia de alt text semántico

• •+55% CTR en resultados de búsqueda
• •+40% tiempo en página
• •+28% en engagement de redes sociales

CASO 3

Portal Educativo

Adaptación WCAG 2.1 nivel AAA

• •100% cumplimiento normativo
• •+85% satisfacción de usuarios con discapacidad
• •-65% en abandono de página

WAVE Accessibility

// Reporte automático
- 15 imágenes sin alt text
- 8 imágenes con alt genérico
- 3 imágenes con alt redundante

Evaluación completa de accesibilidad de imágenes

Jest Testing

test('images have alt attributes', () => {
  const images = document.querySelectorAll('img');
  images.forEach(img => {
    expect(img.hasAttribute('alt')).toBeTruthy();
    expect(img.alt.length).toBeGreaterThan(0);
  });
});

Tests automatizados de implementación

Cypress Accessibility

cy.checkA11y('img', {
  runOnly: {
    type: 'tag',
    values: ['wcag2a', 'wcag2aa']
  }
});

Validación automatizada de estándares WCAG

WordPress

// Habilitar campos personalizados
add_theme_support('media-library-alt-text');

// Obligar alt text
function require_image_alt($post_id) {
  if (wp_attachment_is_image($post_id)) {
    $alt = get_post_meta($post_id, '_wp_attachment_image_alt', true);
    if (empty($alt)) {
      wp_die('Texto alternativo obligatorio');
    }
  }
}
add_action('add_attachment', 'require_image_alt');

Shopify

// En theme.liquid
{% if product.featured_image.alt != blank %}
  <img src="{{ product.featured_image | img_url: 'large' }}" 
       alt="{{ product.featured_image.alt }}">
{% else %}
  <img src="{{ product.featured_image | img_url: 'large' }}" 
       alt="{{ product.title | escape }}">
{% endif %}

Magento/Adobe Commerce

// En archivo .phtml
<img
    src=""
    alt=""
    width=""
/>

Métricas de Implementación

Impacto en Tráfico

Análisis Competitivo

// Benchmark sectorial
- Tu web: 95% imágenes con alt optimizado
- Competidor A: 75% implementación
- Competidor B: 83% implementación
- Media sectorial: 68% implementación

¿Cuál es la longitud ideal del alt text?

La longitud recomendada oscila entre 80-125 caracteres. Debe ser lo suficientemente descriptiva para transmitir el contenido y contexto de la imagen, pero sin extenderse innecesariamente. Los lectores de pantalla a veces truncan descripciones muy largas.

¿Debo incluir «imagen de» o «foto de» en el alt text?

No es necesario ni recomendable. Los lectores de pantalla ya anuncian que es una imagen antes de leer el alt text. Iniciar con «imagen de» o «foto de» resulta redundante y ocupa caracteres valiosos.

¿Qué hago con imágenes puramente decorativas?

Las imágenes decorativas que no aportan contenido significativo deben llevar un alt text vacío (alt=»»). Esto indica a los lectores de pantalla que deben omitirlas, mejorando la experiencia de navegación para usuarios con discapacidad visual.

¿Puedo usar alt text para mejorar mi SEO?

Sí, el alt text es una oportunidad para incluir keywords relevantes, pero siempre de forma natural y descriptiva. Evita el keyword stuffing, ya que puede perjudicar tanto la accesibilidad como el SEO. La prioridad debe ser describir con precisión el contenido visual.

¿Cómo manejar imágenes complejas como infografías?

Para imágenes complejas, en Okisam agencia SEO Valencia combinamos un alt text conciso con técnicas complementarias como: 1) Usar aria-labelledby para vincular a descripciones extensas, 2) Incluir la información clave en el texto circundante, o 3) Proporcionar un enlace a una versión textual de la información.

Documentación Oficial

• • WCAG 2.1 Image Guidelines
• • MDN Web Docs: HTML img element
• • W3C Alt Decision Tree
• • HTML Living Standard

Herramientas

• • WAVE Web Accessibility Evaluation Tool
• • Axe Accessibility Checker
• • Alt Text Tester
• • Google Lighthouse