Subió una foto del equipo y el editor muestra una casilla pequeña con la etiqueta «texto alternativo» y un cursor parpadeando. Alguien le dijo que importa para la accesibilidad y para Google, pero nadie le dijo qué escribir ahí, así que usted escribe «equipo» y sigue adelante, o la deja en blanco y espera lo mejor. Ese es el momento típico en que los dueños aprenden a escribir el texto alternativo: con una docena de imágenes ya publicadas y sin una regla para ninguna. La buena noticia es que una sola pregunta resuelve casi todo. ¿Qué hace esta imagen en esta página? Una imagen que da información recibe una descripción breve, una imagen que funciona como enlace recibe el destino, y una imagen que solo decora no recibe nada. Esta publicación muestra el patrón para cada tipo de imagen que tiene un sitio de negocio, y luego le da una revisión de diez minutos que puede hacer hoy en su página de inicio.
Puntos clave
El texto alternativo debe llevar la información o la función que la imagen tiene en esa página, con las menos palabras que lo logren.
Escribir alt="" le indica a un lector de pantalla que omita una imagen que no aporta nada, y no es lo mismo que dejar el atributo fuera.
Un resumen breve como texto alternativo más las cifras en una tabla o un párrafo de la página, nunca una frase vaga como «gráfico de ventas».
No garantiza posiciones, cumplimiento de la ADA ni protección contra una carta de demanda.
El texto alternativo dice qué hace una imagen en esa página
El texto alternativo es una alternativa en texto para una imagen, que un lector de pantalla lee en voz alta y que los buscadores usan para entender la página. La Iniciativa de Accesibilidad Web del W3C lo plantea así: «Images must have text alternatives that describe the information or function represented by them.» (Las imágenes deben tener alternativas en texto que describan la información o la función que representan.) La regla que lo respalda es el Criterio de Éxito 1.1.1 de WCAG 2.2, que exige una alternativa en texto para el contenido que no es texto y que cumpla un propósito equivalente.
La misma foto puede necesitar un texto alternativo distinto en páginas distintas. La foto del mostrador de una panadería es informativa en una página sobre su tienda, y es decoración en una página donde el texto ya la describe. Así que, usted decide por imagen y por página, no una vez por archivo. El árbol de decisión de texto alternativo del W3C lo convierte en cinco preguntas que puede hacer en orden:
- ¿La imagen contiene texto? Reproduzca el texto, a menos que las mismas palabras ya estén en la página como texto real.
- ¿Es un enlace o un botón? Describa adónde lleva o qué hace.
- ¿Transmite información? Dé una descripción breve de esa información.
- ¿Repite el texto cercano? Entonces puede no necesitar una alternativa propia.
- ¿Es solo decoración? Use texto alternativo vacío.
Escriba el primer borrador con sus propias palabras y léalo como una persona que no puede ver la página. Si le dice lo que el visitante que ve aprende de la imagen, ya está. Si está añadiendo detalles que no cambian lo que el visitante entiende, quítelos. El tutorial de imágenes del W3C recomienda la descripción más concisa que cumpla su función, y Section508.gov dice que el texto alternativo debe ser «short and to the point» (breve y directo al grano) y no debe repetir el texto que está justo al lado de la imagen.
Las fotos del equipo y de los productos reciben una descripción breve de lo que importa
Las imágenes informativas son las que más tienen la mayoría de los sitios de negocios, y por eso es donde los buenos hábitos rinden más. Para una foto del equipo, diga quién o qué aparece y dónde, y añada nombres solo cuando la identidad de las personas importe en esa página. Para una foto de producto, nombre el producto y la característica que un comprador notaría. Empiece con el sujeto útil y omita palabras de apertura como «imagen de» o «foto de», porque un lector de pantalla ya anuncia que es una imagen.
| Imagen | Patrón del texto alternativo | Ejemplo |
|---|---|---|
| Foto del equipo | Quién aparece y dónde | Cuatro empleados de pie frente a la camioneta de servicio del taller. |
| Foto de producto | Nombre del producto y la característica que importa | Taza de cerámica azul con asa blanca. |
| Logotipo que nombra al negocio | El nombre del negocio | Acme Plumbing |
| Logotipo que enlaza a la página de inicio | El destino | Acme Plumbing, inicio |
| Antes y después | La comparación y qué cambió | Antes: camino de concreto agrietado. Después: camino reparado con una superficie lisa. |
| Gráfico | Un resumen breve, con los datos en el texto cercano | Gráfico de barras que muestra los clientes potenciales en línea subiendo de 42 en enero a 78 en marzo. |
Estos ejemplos siguen la guía del W3C, y Acme Plumbing es un nombre inventado que se usa solo para mostrar el patrón. Cambie los detalles por los suyos. Mantenga distinto el texto alternativo de cada imagen de producto, porque un texto idéntico en diez fotos distintas no le dice nada a un usuario de lector de pantalla sobre cuál es cuál.
Los logotipos, las imágenes enlazadas y el texto en imágenes tienen cada uno una respuesta distinta
Un logotipo que identifica a su negocio lleva el nombre del negocio. Si su logotipo está junto al mismo nombre escrito como texto y no añade nada nuevo, el texto alternativo vacío está bien, porque de lo contrario el lector de pantalla diría el nombre dos veces. Cuando el logotipo además es un enlace de regreso a la página de inicio, describa la acción, por ejemplo el nombre del negocio seguido de «inicio», porque eso es lo que la persona que usa un teclado o un lector de pantalla necesita saber antes de pulsarlo.
La misma idea cubre cualquier imagen que funcione como botón o enlace. El texto debe nombrar el destino o la acción, no describir la forma del ícono. Un ícono de lupa en un botón de búsqueda debe decir «Buscar», no «lupa».
Las imágenes que contienen palabras, como un cartel de oferta o un gráfico con su número de teléfono, deben llevar esas palabras en el texto alternativo, a menos que las mismas palabras aparezcan cerca como texto real. Las palabras incrustadas en un gráfico no se pueden seleccionar, agrandar ni leer con tecnología de asistencia, así que la mejor solución es poner el texto esencial en la página como texto y dejar que el gráfico sea decoración. Una advertencia relacionada viene de Google: cuando una imagen es un enlace, su texto alternativo también puede usarse como texto ancla del enlace, así que las palabras del destino importan también para la búsqueda.
Los gráficos necesitan un resumen breve, con las cifras en texto real
Una alternativa vaga como «gráfico de ventas» le da a un usuario de lector de pantalla una etiqueta y ninguna información. La guía del W3C sobre imágenes complejas describe la solución: un texto alternativo breve que nombre el gráfico y su punto principal, más los datos detallados o la explicación como texto normal en la página. Para un gráfico pequeño, eso puede ser una oración o una tabla de tres filas debajo del gráfico. Para una infografía detallada, puede significar una sección de texto, y eso lleva más que unos minutos.
La regla también protege a los visitantes que sí ven. Los datos que viven solo dentro de una imagen no se pueden buscar, copiar ni ampliar con limpieza, así que una tabla junto al gráfico sirve a todos. Si un gráfico de su sitio lleva una cifra que usted quiere que los clientes recuerden, ponga esa cifra en el texto.
Las imágenes decorativas deben tener texto alternativo vacío
Algunas imágenes existen por estética: una línea divisoria, una textura de fondo, una foto de archivo que repite lo que ya dice el encabezado. Para estas, deje el texto alternativo vacío, escrito como `alt=""`. Eso le indica a la tecnología de asistencia que omita la imagen, de modo que un usuario de lector de pantalla no sea interrumpido por «remolino decorativo» ni por un nombre de archivo leído letra por letra. Es el ajuste correcto, y no significa que la imagen no importe para su marca. Significa que la imagen no hace falta para entender la página.
Un atributo alt vacío y uno ausente son cosas distintas. Un atributo ausente puede dejar a la tecnología de asistencia sin ninguna alternativa intencional, mientras que uno vacío es una decisión deliberada. Algunas plataformas ofrecen un ajuste de decorativa para esto, así que busque cerca del campo de texto alternativo en su editor y úselo cuando esté ahí.
Decida con cuidado. La prueba es si un visitante que no pudiera ver la imagen echaría algo en falta. Si lo echaría en falta, es informativa y necesita palabras. Si no, es decoración.
Google lee el texto alternativo, y llenarlo de palabras clave no ayuda
La guía de SEO de imágenes de Google Search Central dice que Google usa el texto alternativo, junto con la visión por computadora y el contenido de la página, para entender una imagen. Pide «useful, information-rich content» (contenido útil y rico en información) y palabras clave usadas con naturalidad, y advierte contra el relleno de palabras clave. Su propio ejemplo compara `alt="puppy"` con `alt="Dalmatian puppy playing fetch"`: el segundo le dice a un lector y a un rastreador qué hay en la foto.
Para un negocio, eso significa describir la imagen como se la describiría a un cliente. «Cerca de cedro con una puerta negra detrás de una casa de ladrillo» es útil. «Instalador de cercas contratista de cercas mejores precios de cercas» es relleno, y suena mal en un lector de pantalla. Google también recomienda nombres de archivo descriptivos y texto relevante alrededor de la imagen, de modo que una foto nombrada por lo que muestra, colocada junto a un párrafo sobre ella, da a todas las señales la misma dirección.
El texto alternativo apoya la comprensión de la imagen y la accesibilidad. No es un interruptor que garantice posiciones, indexación de imágenes, tráfico ni una función de búsqueda en particular. Si quiere ver si sus imágenes están ganando visitas, la publicación sobre el tráfico de búsqueda de imágenes en Search Console le muestra dónde mirar.
El texto alternativo ayuda a la accesibilidad, pero no hace que un sitio cumpla la ley
La falta de texto alternativo es una barrera real. La guía de accesibilidad web del Departamento de Justicia, fechada el 18 de marzo de 2022, incluye el texto alternativo ausente entre los problemas de accesibilidad comunes y dice que las alternativas en texto deben ser breves y descriptivas. Corregirlo hace que su sitio sea utilizable para las personas que dependen de lectores de pantalla.
No resuelve su situación legal. El texto alternativo es un requisito entre muchos, y ninguna plataforma ni complemento puede prometer que por sí solo evita una carta de demanda de la ADA o prueba el cumplimiento; Wix, por ejemplo, dice en su página de accesibilidad que no puede garantizar el cumplimiento de todas las leyes de accesibilidad. Si recibió una carta o quiere entender el riesgo, hable con un abogado, y lea la publicación sobre qué significa una carta de demanda de la ADA contra un sitio web para ver los pasos prácticos que puede dar el dueño de un sitio.
Una revisión de diez minutos cubre las tres imágenes que más importan
No necesita reescribir cada imagen esta noche. Empiece con la página que los visitantes ven primero y avance por esta lista:
- Abra su página de inicio en WAVE, el verificador gratuito de WebAIM, o use su extensión de navegador para páginas privadas o protegidas con inicio de sesión.
- Revise cada imagen que WAVE marque como sin texto alternativo.
- Lea el texto alternativo que WAVE muestra para las imágenes que ya tienen alguno.
- Etiquete cada imagen como informativa, funcional, decorativa, con texto o compleja.
- Escriba o corrija el texto alternativo de las tres imágenes más importantes: normalmente la imagen principal, una imagen de un servicio o producto principal y cualquier imagen junto a una acción de contacto.
- Deje con texto alternativo vacío las imágenes puramente decorativas.
- Guarde, previsualice la página y ejecute WAVE de nuevo.
El propio WAVE señala que una herramienta automática no puede juzgar si el texto alternativo es equivalente y apropiado, así que la decisión final es suya. Una puntuación limpia significa que no hay errores marcados, no que cada descripción sea buena. Después de la página de inicio, avance por sus páginas de servicios principales, la página de contacto y las páginas de productos. Las imágenes vinculadas a una acción de contacto o a una compra son buenas para hacer primero.
El campo de texto alternativo está en un lugar distinto en cada plataforma
Todas las plataformas importantes tienen el campo, aunque la etiqueta y la ruta difieren. En WordPress, seleccione un bloque de imagen y llene el campo de Texto alternativo, o edítelo en la Biblioteca de medios. En Wix, seleccione la imagen, abra Configuración y use el cuadro «What's in the image?» (¿Qué hay en la imagen?). En Squarespace, edite la imagen y use su campo de texto alternativo o de descripción, que depende del tipo de bloque. En Shopify, abra una imagen del tema o de un producto e ingrese el texto en el campo de texto alternativo. Las páginas de ayuda de las plataformas para WordPress, Wix, Squarespace y Shopify muestran los pasos actuales.
Los menús cambian con los planes, las versiones del editor y los temas, así que confirme la ruta en su propio editor antes de apoyarse en esta lista. Para un logotipo en su encabezado o un ícono que se repite, el texto a menudo vive en el tema y no en la biblioteca de medios, lo que significa que una sola corrección ahí cubre todo el sitio.
La ayuda paga se justifica cuando el sitio es grande, no cuando es pequeño
Normalmente usted mismo puede corregir las imágenes de mayor prioridad en minutos, y nadie debería vender el texto alternativo como un truco de SEO ni como un escudo legal. La ayuda vale la pena cuando el sitio tiene muchas plantillas, cientos de imágenes, variantes de tienda en línea, gráficos complejos, contenido traído por un complemento o un tema que genera mal las imágenes. A ese tamaño el trabajo no es escribir una oración en un campo. Es revisar cada imagen dentro de su página, reparar las plantillas, probar el resultado ya generado, escribir reglas que su equipo pueda seguir y volver a revisar después de las actualizaciones.
¿Qué va en la casilla de texto alternativo?
Elija una respuesta para empezar.
1. Una línea divisoria entre dos secciones no aporta nada al contenido. ¿Cuál debe ser su texto alternativo?
2. Su logotipo es un enlace de regreso a la página de inicio. ¿Qué debe decir el texto alternativo?
3. ¿Cuál es el mejor texto alternativo para una foto de producto?
Preguntas frecuentes sobre cómo escribir texto alternativo
¿Qué es el texto alternativo?
El texto alternativo es una alternativa en texto que comunica la información o la función de una imagen a las personas que no pueden verla y a los buscadores.
¿Toda imagen necesita texto alternativo descriptivo?
Las imágenes informativas y funcionales necesitan alternativas con significado. Las imágenes puramente decorativas deben usar texto alternativo vacío, escrito como alt="".
¿El texto alternativo debe incluir palabras clave?
Use palabras relevantes con naturalidad cuando describan la imagen. Google advierte contra el relleno de palabras clave, y una descripción rellena suena mal en un lector de pantalla.
¿Qué extensión debe tener el texto alternativo?
El W3C recomienda la descripción más concisa que cumpla su función, así que no hay una extensión fija. Dé primero el sujeto o la acción útil y pare cuando el propósito de la imagen esté cubierto.
¿Qué debe decir el texto alternativo de un logotipo?
Use el nombre del negocio. Si el logotipo enlaza a la página de inicio, describa el destino, por ejemplo el nombre seguido de «inicio».
¿El texto alternativo garantiza el cumplimiento de la ADA o mejores posiciones?
No. El texto alternativo atiende un requisito de accesibilidad entre muchos, y Google lo usa como una señal entre varias.
Hacia adelante
El texto alternativo se reduce a una pregunta hecha imagen por imagen: ¿qué hace esto en esta página? Las imágenes informativas reciben una descripción breve, las imágenes enlazadas reciben su destino, las imágenes de texto reciben el texto, los gráficos reciben un resumen con los datos al lado, y la decoración recibe un atributo alt vacío. Las palabras clave solo van donde describan la imagen con naturalidad.
Hacerlo bien vuelve sus páginas utilizables para las personas que dependen de lectores de pantalla y da a los buscadores una lectura más clara de lo que muestra cada imagen. También ahorra trabajo repetido, porque un sitio donde cada imagen nueva sigue el mismo hábito nunca acumula un atraso.
Si su sitio tiene cientos de imágenes, varias plantillas o un tema que las maneja mal, Web Leveling puede revisar las páginas, reparar las plantillas y establecer una regla sencilla para las cargas nuevas como parte de nuestro trabajo de diseño web, y puede pedirnos que revisemos las imágenes de su sitio. Trabajamos con pequeñas y medianas empresas en todo el país y en el extranjero.
Términos
Términos de texto alternativo en esta publicación
Toque un término para ver qué significa.
Texto alternativo. Una alternativa breve en texto para una imagen, leída por los lectores de pantalla y usada por los buscadores.
Imagen decorativa. Una imagen que no aporta nada que un visitante necesite para entender la página, y que recibe texto alternativo vacío.
Lector de pantalla. Software que lee una página en voz alta para personas ciegas o con baja visión.
Imagen funcional. Una imagen que funciona como enlace o botón, descrita por su destino o su acción.
Imagen compleja. Un gráfico, diagrama o infografía que necesita un resumen breve más los datos detallados en texto.
WCAG. Las Pautas de Accesibilidad para el Contenido Web, el estándar del W3C para el contenido web accesible.
