Accesibilidad móvil: ¿estás preparado?

El texto alternativo (alt text) describe lo que se puede ver en una imagen. Se utiliza para que tu sitio web sea accesible para todos, incluidas las personas ciegas o con discapacidad visual.

Los lectores de pantalla leen el texto alternativo en voz alta, lo que permite a los usuarios comprender qué representa una imagen. Esto significa que el texto alternativo contribuye directamente a la accesibilidad digital y ayuda a que su sitio web cumpla con las directrices WCAG.

El texto alternativo no solo mejora la accesibilidad, sino que también optimiza el SEO. Las descripciones claras ayudan a los motores de búsqueda a comprender el contenido de una imagen, lo que contribuye a mejorar la usabilidad y el rendimiento del sitio web.

En breve

• El texto alternativo hace que los sitios web sean accesibles para todos.

• Las descripciones claras ayudan a los motores de búsqueda a comprender mejor su contenido.

• El texto alternativo es esencial para cumplir con las directrices de accesibilidad digital.

Cómo escribir un buen texto alternativo (texto alt)

Puedes crear texto alternativo añadiendo una breve descripción al elemento que deseas aclarar. Esto se puede hacer mediante el código o a través de tu CMS (Sistema de Gestión de Contenidos). Un CMS te permite gestionar el contenido de un sitio web sin necesidad de conocimientos técnicos avanzados.

En HTML, la descripción se añade mediante el atributo `alt` dentro de la etiqueta `img`. Esto indica a los usuarios —y a las tecnologías de asistencia— qué muestra la imagen. Por ejemplo:

<img src="flower.jpg" alt="Tulipán amarillo en un jarrón" title="Tulipán amarillo en un jarrón">

Además del atributo alt, también puede utilizar el atributo de título Esto proporciona información adicional cuando los usuarios pasan el cursor sobre un elemento. Algunos lectores de pantalla leen el título en lugar del texto alternativo. Al usar la misma descripción en ambos, se garantiza que no se pierda información.

Para botones y formularios, utilice atributos ARIA como aria-label o aria-etiquetado por . Estas describen la función de un elemento, incluso cuando no hay indicios visuales.

Atributo

Objetivo

Ejemplo

todo

Descripción de una imagen

<img alt=" Eye-Able logo">

título

Explicación adicional

<img title="Logotipo de Eye-Able">

aria-label

Describe botones o formularios

<button aria-label="Enviar formulario">

Diferentes tipos de imágenes

Imágenes informativas

Las imágenes informativas contienen información esencial. Ayudan a los usuarios de lectores de pantalla a comprender lo que se muestra visualmente.

Un ejemplo común es un logotipo. El texto alternativo debe describir brevemente qué muestra el logotipo y a qué organización pertenece.

<img src="logo.jpg" alt=" Logotipo de Eye-Able que muestra un ojo estilizado ." título=" Logotipo de Eye-Able que muestra un ojo estilizado. .">

Evite descripciones vagas como "bonita imagen" o "foto". Céntrese únicamente en la información relevante.

Un lector de pantalla lee este texto en voz alta, de modo que quien no pueda ver la imagen sepa que se trata del logotipo de Eye-Able. Esto hace que el sitio web sea accesible y garantiza que cumpla con las directrices de WCAG.

Ejemplos:

Mal ejemplo

Buen ejemplo

“Imagen de un gráfico”

Gráfico de barras que muestra las cifras de ventas para 2025.

"Logo"

Logotipo de Eye-Able con un ojo estilizado.

"Foto"

“Retrato de un empleado trabajando en un ordenador portátil”

Gráficos y diagramas

Los gráficos muestran datos y relaciones. El texto alternativo debe explicar qué muestra el gráfico y por qué es importante.

• Para gráficos sencillos, incluya los datos clave directamente en el texto alternativo.

• Para gráficos complejos, describa su propósito y remita a los usuarios al texto cercano para obtener más detalles.

Si el diagrama es complejo, simplemente describa su propósito y remita al texto que aparece a continuación para obtener más detalles. Esto evita que el texto alternativo sea demasiado extenso.

Ejemplo:
<img src="election-chart.jpg" alt="Gráfico de barras que muestra los resultados de las elecciones. A continuación se ofrece una explicación más detallada.">

Asegúrese siempre de que las cifras clave también estén disponibles en formato de texto, para que todo el mundo pueda acceder a la información.

Imágenes funcionales

Las imágenes funcionales activan acciones, como botones, iconos o logotipos vinculados. El texto alternativo debe describir lo que hace la imagen No es lo que parece.

Ejemplo:

<a href="https://eye-able.com/"> <img src="logo.jpg" alt="Ir a la página de inicio de Eye-Able" title="Ir a la página de inicio de Eye-Able"</a>

El texto alternativo indica que la imagen enlaza con la página de inicio. La apariencia del logotipo no es importante, sino su función.

Buenos ejemplos:

• “Iniciar búsqueda”

• “Enviar formulario”

• “Página siguiente”

Evite las descripciones visuales como "flecha" o "lupa".

Imágenes funcionales comunes:

Tipo de imagen

Función

Ejemplo de texto alternativo

Icono de búsqueda

Iniciar una búsqueda

"Iniciar búsqueda"

Icono de guardar

Guarda el documento

"Ahorrar"

Flecha a la derecha

Ir a la página siguiente

"Página siguiente"

Icono de inicio

Ir a la página principal

"Página principal"

Este método garantiza que todos, incluidos los usuarios de lectores de pantalla, comprendan lo que sucede cuando hacen clic en la imagen.

Imágenes decorativas

Las imágenes decorativas no aportan ningún contenido. Su única función es crear ambiente o dar estilo al diseño. En este caso, deje el atributo alt vacío:

<img src="background-pattern.jpg" alt="">

Los lectores de pantalla omitirán estas imágenes, evitando así interrupciones innecesarias.

Utilice imágenes decorativas de forma deliberada. Si una foto o un icono transmite algo sobre el contenido, no debe ser meramente decorativo. En ese caso, añada una descripción.

Lista de verificación para imágenes decorativas:

• ¿La imagen añade significado? ¿
  Sí → agregar texto alternativo.
  No → deja el atributo alt vacío.

• ¿Es puramente decorativo?

  Sí → usar alt="" .

• ¿Forma parte de un botón o un enlace?

  No → entonces puede ser decorativo.

Una clara distinción entre imágenes decorativas e informativas ayuda a mantener la accesibilidad de su sitio web.

Al utilizar texto alternativo de esta manera, consigues que tu sitio web sea más comprensible y fácil de usar para todos.

Cómo escribir texto alternativo eficaz

Los buenos textos alternativos ayudan a las personas con discapacidad visual a comprender el contenido de las imágenes. Para redactar un buen texto alternativo, basta con describir de forma breve y clara lo que se puede ver en la imagen.

Mejores prácticas:

• Sea conciso y descriptivo.

• Evite frases como “imagen de” o “foto de”.

• Céntrate en lo que es relevante para el contexto.

• Mantén el texto alternativo entre 80–120 caracteres

• Utilice la ortografía y la gramática correctas.

Resumen de las directrices

Aspecto

Pauta

Ejemplo

Apertura

Evite “imagen de”

“Coche azul en una carretera rural”

Longitud

80–120 caracteres

Dos estudiantes trabajando en sus portátiles en una biblioteca.

Idioma

Claro y correcto

No se permiten abreviaturas ni emojis.

Enfocar

Solo contexto relevante

Describe lo que importa

El texto alternativo también ayuda al SEO. Los motores de búsqueda lo utilizan para comprender las imágenes, mejorando la visibilidad en los resultados de búsqueda de imágenes, sin saturación de palabras clave.

Pide la opinión de alguien que use un lector de pantalla o que no esté familiarizado con la imagen. Su respuesta te indicará si la descripción es lo suficientemente clara. Si entienden lo que muestra la imagen, sabrás que el texto alternativo funciona correctamente. Esto hará que tu sitio web sea más accesible y fácil de usar para todos.

¿Qué ocurre si falta el texto alternativo?

Sin texto alternativo, Los lectores de pantalla anuncian nombres de archivo como img123.jpg. Los usuarios se pierden información crucial y su sitio web podría infringir la normativa WCAG y las leyes de accesibilidad.

Consecuencias de la falta de texto alternativo:

• Los usuarios no entienden el contenido.

• Tu sitio no cumple con los requisitos de WCAG 2.2.

• Las organizaciones se exponen a multas en virtud de las leyes de accesibilidad.

El texto alternativo garantiza la igualdad de acceso y el cumplimiento de la Ley Europea de Accesibilidad (EAA).

Legislación sobre accesibilidad digital

Las leyes de accesibilidad digital exigen que las organizaciones hagan que los sitios web y las aplicaciones sean utilizables por todos, incluidas las personas con discapacidad.

• Las directrices de WCAG definen los estándares de accesibilidad.

• De 28 de junio de 2025 , el Ley Europea de Accesibilidad (EAA) Se aplica a muchos productos y servicios digitales.

• La aplicación de la ley está supervisada por un grupo diverso de agencias o instituciones (gubernamentales).

Obligaciones clave:

• Cumple con la norma EN 301 549.

• Publicar una declaración de accesibilidad

• Proporcione textos alternativos para imágenes y contenido multimedia.

• Supervisar y mantener la accesibilidad de forma continua.

Directrices y texto alternativo de WCAG

WCAG 2.2 aclara cómo se debe usar el texto alternativo:

• Toda imagen significativa necesita un texto alternativo descriptivo.

• Las imágenes decorativas usan alt=""

• El contexto determina qué es relevante.

• Realice pruebas periódicamente utilizando herramientas de accesibilidad.

Puntos clave de WCAG 2.2:

Pauta

Explicación

Se requieren textos alternativos

Cada imagen relevante incluye un texto alternativo descriptivo.

Imágenes decorativas

Utilice texto alternativo vacío ( alt="" ) si la imagen no aporta ninguna información.

El contexto es importante

Describe qué es relevante para el contenido de la página.

Prueba tu contenido

Utilice un comprobador WCAG para verificar que sus textos alternativos cumplen con los requisitos.

Preguntas frecuentes

1. ¿Cómo puedo añadir texto alternativo a las imágenes?

Agregue el atributo alt en HTML o a través de su CMS con una descripción breve y clara.

2. ¿Cómo puedo hacer que el texto alternativo sea claro para todos? ¿

Utilice un lenguaje sencillo, evite los detalles innecesarios y describa lo que los usuarios se perderían de otro modo.

Texto alternativo adecuado:

• Describe lo que alguien se pierde si la imagen no es visible.

• Tiene en cuenta las directrices WCAG para la accesibilidad digital.

• Se ajusta al significado de la página.

3. ¿Qué errores debo evitar?

Muchas personas dejan el texto alternativo en blanco o escriben frases demasiado largas. Esto dificulta la accesibilidad del sitio web.

Evita estos errores:

1. Dejando el texto alternativo vacío

2. Redacción de descripciones genéricas

3. Relleno de palabras clave

4. Agregar texto alternativo a imágenes puramente decorativas

4. ¿Cómo mejora el texto alternativo el SEO de mi sitio web?

El texto alternativo ayuda a los motores de búsqueda a comprender el contenido de una imagen. Esto puede mejorar el posicionamiento de tu imagen en Google Imágenes.

Texto alternativo bien redactado:

• Mejora la visibilidad de tu sitio web.

• Proporciona contexto a los motores de búsqueda.

• Aumenta la probabilidad de que los usuarios visiten tu sitio web.

5. ¿La ausencia de texto alternativo afecta a la accesibilidad?

Sí, sin texto alternativo, los lectores de pantalla no pueden describir el contenido de la imagen. Por lo tanto, las personas con discapacidad visual se pierden información.

El texto alternativo garantiza que todos comprendan el mismo contenido, independientemente de si pueden ver o no. Esto hace que su sitio web sea más accesible y fácil de usar.

6. ¿Cómo puedo probar mi texto alternativo?

Utilice lectores de pantalla como NVDA o VoiceOver, o compruebe su sitio web con la plataforma de accesibilidad Eye-Able para identificar al instante los textos alternativos que faltan o que no son claros.

También puedes usar herramientas que comprueban la accesibilidad, como nuestra plataforma Eye-Able. Te mostramos de forma rápida y sencilla si faltan textos alternativos o si estos no son claros.