MARKETING/SEO

Comprobador de alt text en emails

Revisa la accesibilidad de las imágenes de tu email antes de enviarlo: alt text ausente o vacío, imágenes decorativas mal marcadas, enlaces sin texto y anchos excesivos.

HW

HTML del email

Informe

Buenas prácticas para imágenes en email

  • Toda imagen informativa necesita un alt descriptivo (ej.: "Oferta: 20% en toda la tienda hasta el domingo").
  • Las imágenes decorativas (separadores, bordes) deben marcarse con alt="" y role="presentation" para que los lectores de pantalla las ignoren.
  • Los botones en imagen deben tener alt y un texto visible equivalente; lo ideal es usar botones de HTML con fondo.
  • Mantén el ancho del email ≤ 600 px y evita imágenes pesadas (formato optimizado, lazy-load no aplica en email).

Qué hace Comprobador de alt text en emails

Comprobador de alt text en emails forma parte del catálogo client-side de 1000 Herramientas Web: el archivo o el texto que introduzcas no se sube a nuestros servidores. Pega el HTML de tu email y comprueba la accesibilidad de sus imágenes: alt text ausente o vacío, imágenes decorativas, enlaces sin texto y tamaño de las imágenes. Categoría: MARKETING/SEO.

Sirve a quien necesita el resultado ahora (un autónomo, un estudiante, alguien en un PC bloqueado) y no quiere una suite completa.

Cómo usarla

  1. Entra en esta página. No hay registro: la herramienta está lista en cuanto carga.
  2. Usa los controles de la zona central: son los únicos datos que entra la herramienta.
  3. Pulsa «Comprobar accesibilidad» o «Cargar ejemplo» según quieras copiar, generar o descargar.
  4. El resultado se queda en formato texto en pantalla.
  5. Cierra la pestaña cuando termines. No queda una copia en 1000herramientasweb.com porque el cálculo no ha salido de tu dispositivo.

Un caso real

Rellenas los campos de la ficha y copias o descargas el resultado. Nada viaja a un API de «IA en la nube».

1000 Herramientas Web publica utilidades client-side: el valor está en que puedes resolver la tarea sin una cuenta SaaS y sin entregar el documento a un tercero. Esta ficha sigue esa regla.

Límites (para no venderte humo)

  • No hay cuenta, historial en la nube ni colaboración en tiempo real.
  • Si recargas o cierras la pestaña sin copiar/descargar, el trabajo se pierde.
  • El límite práctico es la memoria de tu navegador, no un plan de pago.
  • No es asesoramiento legal, fiscal, médico ni un sustituto de software con licencia cuando el nombre comercial coincida.
  • Los formatos de salida que genera esta ficha son: texto en pantalla.

Preguntas frecuentes

¿Comprobador de alt text en emails sube mis datos a un servidor?

No. El JavaScript de esta página corre en tu navegador. Puedes comprobarlo en las herramientas de desarrollador (pestaña Red): no verás una subida del contenido que has pegado o del archivo local.

¿Puedo usar el resultado de Comprobador de alt text en emails en un trabajo o con un cliente?

Sí. El archivo o el texto que generas es tuyo. La plantilla o el cálculo son una ayuda; si el documento tiene efectos legales o fiscales, revísalo con un profesional.

¿Funciona sin internet?

Tras la primera carga, muchas fichas siguen funcionando si el navegador ha cacheado los scripts. La primera visita sí necesita red para descargar la página, las fuentes y, si los consientes, los anuncios.

Herramientas relacionadas

  • Mandala Maker Online — Crea mandalas simétricos en tu navegador: pétalos, capas y 5 formas geométricas sobre 7 paletas de color, con generador aleatorio y exportación a PNG de alta re
  • Simulador de acuarela digital — Acuarela digital con pigmentos que se funden, difusión y textura de papel, 100% local.
  • Optimizador WebP y AVIF — Convierte y optimiza imágenes a WebP o AVIF en lote: calidad ajustable, ancho máximo y comparativa de peso antes/después. 100% client-side, sin límites.
  • Conversor PDF/A ↔ PDF — Añade o quita el marcado PDF/A de tus documentos, sin subirlos.
`; function comprobar() { const html = $('html').value; const doc = new DOMParser().parseFromString(html, 'text/html'); const lista = $('lista'); lista.innerHTML = ''; let ok = 0, mal = 0; const imgs = doc.querySelectorAll('img'); imgs.forEach((img, i) => { const tieneAlt = img.hasAttribute('alt'); const alt = img.getAttribute('alt') ?? ''; const decorativa = img.getAttribute('role') === 'presentation' || alt === ''; const enA = img.closest('a') !== null; const w = img.getAttribute('width'); const src = img.getAttribute('src') || '(sin src)'; let estado, msg, tipo; if (!tieneAlt) { estado = false; mal++; tipo = 'Sin alt'; msg = 'La imagen no tiene el atributo alt: los lectores de pantalla anunciarán el nombre del archivo.'; } else if (alt === '' && !decorativa) { estado = false; mal++; tipo = 'alt vacío'; msg = 'alt="" sin role="presentation": para decorativas añade role="presentation", si es informativa describe el contenido.'; } else if (alt === '') { estado = true; ok++; tipo = 'Decorativa'; msg = 'alt="" + role="presentation": correcto, será ignorada por los lectores de pantalla.'; } else if (alt.length > 100) { estado = false; mal++; tipo = 'alt muy largo'; msg = 'El alt tiene ' + alt.length + ' caracteres: mejor mantenerlo breve y descriptivo (≤ 100).'; } else { estado = true; ok++; tipo = 'OK'; msg = 'Alt descriptivo (' + alt.length + ' caracteres).'; } if (w && +w > 600) { mal++; msg += ' Ancho ' + w + ' px > 600 px (se cortará en móvil).'; } if (enA && alt === '') { mal++; msg += ' Es un botón/enlace con imagen: necesita texto alternativo que describa la acción.'; } const div = document.createElement('div'); div.className = 'border rounded-xl p-3 ' + (estado ? 'border-emerald-200 bg-emerald-50' : 'border-red-200 bg-red-50'); div.innerHTML = '
' + (estado ? '' : '') + '' + '

Imagen ' + (i + 1) + ' · ' + tipo + '

' + '

' + src.replace(/' + '

' + msg + '

'; lista.appendChild(div); }); const enlaces = doc.querySelectorAll('a'); enlaces.forEach((a, i) => { const texto = a.textContent.trim(); const imgAlt = a.querySelector('img') ? a.querySelector('img').getAttribute('alt') : ''; if (!texto && !imgAlt) { mal++; const div = document.createElement('div'); div.className = 'border rounded-xl p-3 border-red-200 bg-red-50'; div.innerHTML = '
' + '

Enlace ' + (i + 1) + ' · Sin texto

' + '

' + (a.getAttribute('href') || '').replace(/' + '

El enlace no tiene texto visible ni imagen con alt: inaccesible.

'; lista.appendChild(div); } }); $('stats').innerHTML = '' + ok + ' correctas · ' + mal + ' incidencias'; if (!imgs.length) { $('vacio').classList.remove('hidden'); $('vacio').textContent = 'No se encontraron imágenes en el HTML.'; } else $('vacio').classList.add('hidden'); } $('btnCheck').addEventListener('click', comprobar); $('btnEjemplo').addEventListener('click', () => { $('html').value = EJEMPLO; comprobar(); }); $('html').value = '';