1.1.1 Contenido no textual

Criterio de éxito oficial

¿Qué es el contenido no textual?

El contenido no textual es cualquier elemento de un sitio web que no sea texto: imágenes, vídeos, audio y otros contenidos visuales y auditivos. Las personas con discapacidad visual, auditiva o con dificultades para procesar la información pueden tener problemas para percibir o comprender este tipo de contenido.

Las alternativas textuales facilitan el acceso a este contenido para todos. La información puede ser leída individualmente, en voz alta por lectores de pantalla, transmitida a través de pantallas braille actualizables o traducida a otros idiomas.

El contenido no textual puede adoptar muchas formas:

• Elementos visuales informativos: gráficos, diagramas e infografías
• Grabaciones de audio como podcasts
• Vídeos pregrabados con y sin audio
• Pistas de audio o vídeo en vivo
• Imágenes, fotografías y animaciones
• Elementos decorativos o estéticos
• Música y obras de arte
• Entradas visuales de usuario: botones de iconos o mapas de imágenes
• Pruebas o cuestionarios con contenido visual
• CAPTCHA y ejercicios de verificación humana

¿Por qué es importante?

El contenido no textual puede ser una barrera para muchas personas, incluyendo personas con discapacidad visual, auditiva o cognitiva. Además, es inaccesible para quienes no comprenden el idioma en el que se presenta.

Las alternativas de texto ofrecen una manera para que todos accedan al mismo contenido que de otro modo solo se proporcionaría por medios visuales o auditivos. Además, hacen que el contenido se pueda buscar y reutilizar de nuevas maneras.

¿Quién se ve afectado?

Personas con discapacidad visual — No pueden percibir imágenes, diagramas o vídeos. Las alternativas de texto permiten acceder al contenido mediante lectores de pantalla o pantallas braille.

Personas sordas o con dificultad auditiva — No pueden percibir contenido auditivo como podcasts o bandas sonoras. Las alternativas textuales les permiten leer la información.

Personas con dificultades cognitivas — Pueden beneficiarse de las alternativas al proporcionar múltiples formas de explicar el mismo contenido.

Personas sordociegas — Pueden leer las alternativas de texto en braille, accediendo así a información que de otro modo sería completamente inaccesible.

Cómo implementar 1.1.1

Imágenes

Al agregar imágenes a las páginas, revisa si son importantes para comprender el contexto general. Usa el atributo alt de HTML para añadir un texto alternativo que explique su significado. El texto alternativo debe ser breve y conciso — una buena regla es mantenerlo en torno a los 125 caracteres.

El texto alternativo debe centrarse en el contexto de la imagen dentro de la página. Evita incluir palabras como «imagen de» o «fotografía de» y no repitas el pie de foto.

El caso más habitual en desarrollo web es el logotipo en el header. Su propósito no es describir la imagen sino indicar la función del enlace que contiene:

<a href="/">
  <img
    src="logo.svg"
    alt="AccesibleWeb — Ir a la página de inicio"
  />
</a>

<a href="/">
  <img src="logo.svg" alt="logo" /> ← no describe el propósito
</a>
<!-- O sin alt: el lector de pantalla leerá el nombre del fichero -->

Imágenes decorativas

Las imágenes que solo mejoran la estética sin transmitir información no necesitan texto alternativo. En estos casos, utiliza un atributo alt vacío para que la tecnología de asistencia las ignore. No omitas el atributo — debe estar presente y vacío.

Otra técnica es usar CSS para incluir imágenes decorativas mediante background-image, ya que las tecnologías de asistencia las ignoran por defecto.

<!-- alt vacío: el lector de pantalla la ignora -->
<img src="patron-ondas.svg" alt=""/>

<!-- O mejor: imagen decorativa en CSS -->
.hero {
  background-image: url('patron-ondas.svg');
}

Imágenes vinculadas

En listados de productos, artículos de blog o portfolios es habitual tener una imagen y un título que enlazan al mismo destino. Si se implementan como dos enlaces separados, el lector de pantalla visita el mismo destino dos veces seguidas, lo que resulta confuso y redundante.

La solución es contener la imagen dentro del mismo elemento <a> que el texto, dejando el alt de la imagen vacío para evitar repetición:

<a href="/producto/auriculares-pro">
  <img src="auriculares.jpg" alt=""/>
  Auriculares Pro — Ver detalles
</a>

<a href="/producto/auriculares-pro">
  <img src="auriculares.jpg" alt="Auriculares Pro"/>
</a>
<a href="/producto/auriculares-pro">
  Auriculares Pro — Ver detalles
</a>

Agrupaciones de iconos

Cuando un grupo de elementos no textuales transmite información en conjunto —como un sistema de clasificación por estrellas— proporciona una sola alternativa de texto que describa el grupo como unidad. Evita la repetición: asigna el texto alternativo significativo a un solo elemento y deja los demás con alt="".

<img src="star.svg" alt="Valoración: 4 de 5 estrellas"/>
<img src="star.svg" alt=""/>
<img src="star.svg" alt=""/>
<img src="star.svg" alt=""/>
<img src="star-empty.svg" alt=""/>

Emojis, emoticonos y arte ASCII

Los emojis tienen nombres predefinidos que no siempre coinciden con su significado cultural. Los emoticonos y caracteres ASCII se leen carácter por carácter. Debes incluir alternativas de texto para transmitir su significado:

<button type="button">
  <span aria-label="Me gusta" role="img">👍</span>
  <span>42</span>
</button>

Controles de formulario con iconos

Los botones que contienen solo un icono necesitan un nombre accesible. Sin él, el lector de pantalla anuncia simplemente "botón" sin ningún contexto. Usa aria-label en el botón o un texto visualmente oculto con .sr-only.

<label for="busqueda">Buscar en el sitio</label>
<input type="search" id="busqueda"/>
<button aria-label="Iniciar búsqueda">
  <svg aria-hidden="true">...</svg>
</button>

Audio, música e ilustraciones

Para archivos de audio, música e ilustraciones, incluye los nombres propios del material: nombre de la obra, del artista, medio utilizado, fecha de creación y una breve descripción del contenido. Para música, puedes añadir información sobre el género, compositor o un enlace a la letra.

CAPTCHA

Los CAPTCHA son un tema controvertido en accesibilidad. Para hacerlos más accesibles: proporciona una alternativa de texto que describa el propósito del CAPTCHA, ofrece un CAPTCHA alternativo con una modalidad diferente (visual y auditivo) y, si es posible, considera alternativas como honeypots o verificación por email.

Contenido complejo

El contenido complejo —gráficos, infografías, diagramas— no puede describirse con un texto alternativo breve. Para este tipo de contenido, combina un alt breve que resume el propósito con una descripción larga accesible mediante aria-describedby o un enlace a la descripción completa.

<figure>
  <img
    src="grafico-usuarios.png"
    alt="Gráfico: usuarios con y sin discapacidad (ene–dic 2024)"
    aria-describedby="desc-grafico"
  />
  <figcaption id="desc-grafico">
    Los usuarios con discapacidad crecieron un 34% tras el rediseño accesible
    de marzo. El mayor crecimiento se registró en mayo (+8%) y septiembre (+7%).
  </figcaption>
</figure>

Técnicas recomendadas

• H37 — Uso del atributo alt en elementos img
• H67 — alt vacío en imágenes decorativas
• H2 — Combinar imágenes y texto adyacentes en el mismo enlace
• ARIA10 — aria-labelledby para alternativas de texto
• G94 — Alternativa de texto breve que cumple el mismo propósito
• G95 — Alternativa de texto breve + descripción larga

Errores comunes

• Alt que describe el aspecto en lugar del propósito — "foto de personas reunidas" en vez de "Equipo de producto en sesión de revisión de accesibilidad".
• Atributo alt ausente en imágenes informativas — el lector de pantalla anuncia el nombre del fichero.
• Alt genérico como alt="imagen" o alt="foto" que no aporta información.
• Imágenes decorativas con alt descriptivo — genera ruido para los usuarios de lector de pantalla.
• Botones con solo icono sin nombre accesible — el lector de pantalla anuncia "botón" sin contexto.
• SVGs inline sin role="img" y <title> — los SVGs inline necesitan marcado adicional para ser accesibles.

Criterios relacionados