Ejemplos de texto alt: qué escribir para cada tipo de imagen
Ejemplos de texto alt
Ejemplos de texto alt: buenos y malos, por tipo de imagen | We.Inc
Qué es el texto alt, ejemplos buenos y malos de texto alt para logos, productos, iconos, gráficos e imágenes decorativas, los pasos de decisión del W3C y un breve test de práctica.
El texto alt es el breve sustituto escrito de una imagen, definido en el atributo alt de una etiqueta img. Los lectores de pantalla lo leen en voz alta y los navegadores lo muestran cuando la imagen no carga. Un buen texto alt dice lo que la imagen significa en su lugar de la página; las imágenes decorativas llevan un alt vacío.
Ejemplos rápidos por tipo de imagen
Imagen
Alt flojo
Alt mejor
Logo que enlaza a la página de inicio
Inicio de Smith Roofing
Foto de producto
Bolso tote de piel marrón con hebilla de latón
Botón con icono de búsqueda
lupa
Buscar
Remolino separador
remolino decorativo
(vacío: alt="")
Foto del equipo
Nuestros cuatro techadores junto a la furgoneta del taller
Gráfico de ventas
Ventas por mes, detalles en la tabla de abajo
Las palabras adecuadas dependen de por qué está ahí la imagen, no de cómo se ve. Una lupa dentro de un botón significa Buscar; la misma forma como adorno de la página no significa nada. Prueba las preguntas de práctica y luego copia los patrones para tu propia tienda o sitio.
Lee la situación de cada tarjeta de práctica: qué muestra la imagen y dónde está en la página.
Elige, entre las tres opciones, el texto alt que escribirías.
La tarjeta te dice si esa opción funciona y qué paso del árbol de decisión del W3C se aplica.
Usa la tabla de ejemplos de abajo como referencia cuando añadas imágenes a tus propias páginas.
Evita expresiones como imagen de o foto de. Los lectores de pantalla ya anuncian que es una imagen.
En las fotos de producto, nombra los detalles por los que preguntaría un comprador: color, material, qué hace diferente a esta variante.
Si la misma información aparece en texto justo al lado de la imagen, un alt vacío evita decirla dos veces.
Nunca rellenes con palabras clave. Google advierte que llenar los atributos alt de palabras clave puede hacer que tu sitio se considere spam.
Preguntas frecuentes
¿Qué significa alt en un texto?
Alt es la abreviatura de alternativo. El texto alt es el texto alternativo de una imagen: las palabras que pronuncia un lector de pantalla y lo que el navegador muestra en lugar de una imagen que no puede cargar. Se coloca en el atributo alt del elemento img.
¿Todas las imágenes deben tener texto alt?
Todo img debe tener un atributo alt, pero no todos necesitan palabras. MDN explica que un alt vacío marca una imagen como parte no esencial del contenido. Omitir el alt por completo es peor: algunos lectores de pantalla leen entonces el nombre del archivo.
¿Qué longitud debe tener el texto alt?
Lo bastante corto para decirlo de un tirón en la mayoría de las imágenes. El árbol del W3C pide una descripción breve para las fotos sencillas. Los gráficos y diagramas son la excepción: pon una etiqueta corta en el alt y la información completa en texto en la página.
¿El texto alt ayuda al SEO?
Sí. La guía de imágenes de Google dice que usa el texto alt junto con la visión artificial y el contenido de la página para entender las imágenes. Su propio ejemplo prefiere cachorro dálmata jugando a buscar la pelota frente a un simple cachorro, y advierte contra las listas de palabras clave.
¿Qué texto alt debe tener un logo?
Si el logo enlaza a tu página de inicio, el alt debe describir adónde lleva el enlace, por ejemplo el nombre de tu negocio más inicio. Si solo se muestra y tu nombre ya aparece como texto a su lado, un alt vacío está bien.
El árbol de decisión del W3C en palabras sencillas
Primero, ¿la imagen contiene texto? Si ese texto también aparece cerca como texto real, usa un alt vacío; si no, pon el texto en el alt. Después, ¿está dentro de un enlace o botón? Entonces describe adónde lleva el enlace o qué hace el botón.
¿Aporta significado? Da a las fotos sencillas una descripción breve y, en los gráficos, pon los datos en otro lugar de la página. ¿Es solo decoración? Usa un alt vacío.
Texto alt para tiendas online
Los compradores que usan lectores de pantalla dependen del texto alt de las imágenes de producto igual que otros dependen del zoom. Cuando un producto tiene varias fotos, haz que cada alt sea distinto: vista frontal, detalle del bolsillo trasero, puesto en un modelo de 170 cm de altura.
Más ejemplos para tiendas y sitios de negocios
Ejemplos de texto alt para imágenes comunes de negocios
Dónde está la imagen
Texto alt de ejemplo
Por qué
Foto principal del interior de una cafetería
Mostrador soleado de cafetería con bollería recién hecha a la vista
Sitúa la escena en pocas palabras
Retrato en una página Sobre nosotros
Dra. Amira Khan, dentista principal
Nombre y cargo, no el color de pelo
Icono social que enlaza a Instagram
Harbour Bakery en Instagram
Describe el destino del enlace
Captura de un mapa con tu dirección al lado
(vacío: alt="")
La dirección ya está en texto cerca
Foto de antes y después de un tejado reparado
Tejado antes de la reparación, con tejas que faltan en la cumbrera
Dice qué cambia entre las fotos
Insignia de certificación
Certificado por el consejo regional de oficios
Dice qué certifica la insignia
Ejemplos de código
Tres casos comunes en HTML
Un logo enlazado, una foto de producto y una imagen decorativa. Fíjate en que la decorativa sigue teniendo el atributo alt, solo que vacío.
Un gráfico con sus datos en texto
El alt nombra el gráfico y remite a los detalles, que están en un pie que cualquier visitante puede leer.
Práctica: elige el mejor texto alt
{n} de {v} respondidas correctamente.
Correcto.
No del todo. La mejor respuesta es: {v}.
Empezar de nuevo
Opciones de texto alt
Tu logo está en la cabecera y enlaza a la página de inicio. El nombre de tu negocio no aparece escrito en ningún otro lugar de la cabecera.
Inicio de Harbour Bakery
Nuestro precioso logo en azul
Una imagen enlazada necesita un texto alt que diga adónde lleva el enlace.
Una fina línea ondulada separa dos secciones. No aporta información.
línea ondulada
imagen separadora
Un alt vacío (alt="")
Las imágenes puramente decorativas llevan un alt vacío para que los lectores de pantalla las salten.
La foto principal de la página de producto de una taza que se vende en tres colores. Esta es la verde salvia.
Taza de gres verde salvia con asa curva
taza taza taza de café mejor taza regalo
foto de producto
Una descripción breve con los detalles que distinguen esta variante. Las listas de palabras clave son spam.
Un botón que solo tiene un icono de carrito abre el carrito de compra.
Icono de carro de la compra
Ver carrito
Para una imagen dentro de un botón, describe la acción, no el dibujo.
Una imagen de banner con las palabras Envío gratis este fin de semana. Esas palabras no están en la página como texto.
Banner
Banner de rebajas con fondo rojo
Envío gratis este fin de semana
Cuando el texto aparece solo dentro de la imagen, el alt debe incluir ese texto.