WCAG 1.1.1: Contenido no textual

Qué significa esta regla

El Criterio de Conformidad 1.1.1 Contenido no textual de las WCAG es un requisito de Nivel A bajo el principio de Perceptible. Establece que todo contenido no textual presentado a la persona usuaria debe tener una alternativa textual que cumpla el mismo propósito. “Contenido no textual” se define de forma amplia: abarca imágenes ráster (JPEG, PNG, GIF, WebP), gráficos vectoriales (SVG), botones e inputs de formulario basados en imágenes, mapas de imagen, elementos canvas, clips de audio, video, animaciones, CAPTCHAs y adornos decorativos.

Una alternativa textual puede adoptar varias formas según el tipo de elemento: un atributo alt en un elemento <img>, un aria-label o aria-labelledby en un SVG o en un elemento con rol, un elemento title dentro de un <object>, o un <figcaption> asociado a una figura. El requisito clave es que el texto alternativo comunique la misma información o función que el propio contenido visual: no es simplemente un nombre de archivo ni un marcador de posición genérico.

El criterio define varios casos específicos que determinan cómo debe ser una alternativa textual adecuada:

• Controles e inputs: Si el contenido no textual es un control o acepta entrada de la persona usuaria (como un botón de imagen o una imagen usada como enlace), la alternativa textual debe describir su propósito o función, no solo su apariencia.
• Medios temporales: El contenido solo de audio o solo de video usado como presentación independiente requiere como mínimo una etiqueta descriptiva que lo identifique; las transcripciones completas y los subtítulos se abordan en criterios posteriores (1.2.x).
• Pruebas y experiencias sensoriales: Si el contenido es una prueba o ejercicio que no puede presentarse en texto sin anular su propósito (como un rompecabezas visual), la alternativa textual solo necesita identificar y describir el contenido no textual.
• CAPTCHAs: Las alternativas textuales deben describir el propósito del CAPTCHA, y se debe proporcionar una forma alternativa de CAPTCHA que use una modalidad sensorial diferente.
• Decoración, formato y contenido invisible: Si una imagen es puramente decorativa, se usa para espaciado o no se presenta a las personas usuarias, debe implementarse de modo que pueda ser ignorada por la tecnología de apoyo, normalmente mediante un atributo alt="" vacío o role="presentation".

Se obtiene un aprobado cuando cada elemento no textual significativo expone una alternativa textual programática que transmite de forma equivalente su propósito, o está marcado explícitamente como decorativo para que las tecnologías de apoyo puedan omitirlo. Se produce un fallo cuando una imagen no tiene atributo alt en absoluto, cuando el valor de alt es el nombre de archivo (por ejemplo, alt="img_header_logo_v2.png"), cuando un SVG usado como contenido significativo no tiene ni un elemento <title> ni una etiqueta accesible, o cuando una imagen decorativa tiene de forma incorrecta un texto alternativo descriptivo que añade ruido para las personas usuarias de lectores de pantalla.

Por qué es importante

Según la Organización Mundial de la Salud, aproximadamente 2.2 mil millones de personas en todo el mundo tienen algún tipo de discapacidad visual o ceguera. Las personas usuarias de lectores de pantalla —que dependen de voz sintética o de pantallas Braille actualizables para consumir contenido digital— dependen por completo de las alternativas textuales para comprender imágenes, iconos, gráficos y controles gráficos. Sin texto alternativo preciso, una página de producto en un sitio de comercio electrónico se reduce a una lista de precios sin contexto visual; la navegación de un banco llena de logotipos se convierte en una fila de botones sin etiqueta; el diagrama de un verificador de síntomas de un hospital es invisible para la persona usuaria que intenta autoevaluarse.

Consideremos un escenario concreto: una persona usuaria ciega visita una plataforma turca de comercio electrónico para comprar una chaqueta. El carrusel de productos contiene seis imágenes que muestran distintos ángulos y variantes de color de la chaqueta. Si ninguna de esas imágenes tiene texto alternativo significativo, el lector de pantalla de la persona usuaria solo anuncia “imagen, imagen, imagen”, seis veces. No puede determinar qué variante es azul marino frente a negra, no puede entender qué imagen muestra el bolsillo trasero y puede abandonar la compra por completo. Una colega vidente con el mismo enlace de producto completa la compra en menos de dos minutos. Esta brecha es tanto un fallo de accesibilidad como una pérdida comercial.

Más allá de la ceguera, este criterio también beneficia a personas usuarias con discapacidades cognitivas que dependen de herramientas de texto a voz para complementar la lectura, a personas con discapacidades motoras que navegan con teclado y voz y necesitan etiquetas claras en los controles interactivos, y a personas usuarias con poco ancho de banda para quienes las imágenes pueden no cargarse; en esos casos, el texto alternativo actúa como un reemplazo funcional. Además, un texto alternativo bien elaborado mejora la indexación en motores de búsqueda porque los rastreadores tratan los atributos alt de las imágenes como señales textuales relevantes, lo que respalda directamente los resultados de SEO.

Reglas relacionadas de Axe-core

El motor de accesibilidad axe-core aplica las WCAG 1.1.1 mediante siete reglas automatizadas distintas. Entender qué comprueba cada regla —y dónde están sus límites— es esencial para una estrategia de pruebas completa.

• image-alt: Comprueba que cada elemento <img> tenga un atributo alt (que puede estar vacío para imágenes decorativas) o un nombre accesible proporcionado mediante aria-label, aria-labelledby o title. Señala las imágenes que no tienen atributo alt en absoluto, ya que el navegador expone entonces la ruta del archivo como nombre accesible.
• input-image-alt: Comprueba que los elementos <input type="image"> tengan un atributo alt no vacío. Los inputs de imagen actúan como botones de envío y deben transmitir su función, no solo su apariencia visual. Un alt ausente o vacío en un input de imagen hace que el botón sea prácticamente inutilizable con un lector de pantalla.
• area-alt: Comprueba que cada elemento <area> dentro de un mapa de imagen tenga una alternativa textual no vacía mediante alt, aria-label o aria-labelledby. Los mapas de imagen son un patrón heredado que aún se usa en algunas aplicaciones empresariales y portales del sector público, y cada zona activa debe describir de forma independiente su destino de enlace o función.
• object-alt: Comprueba que los elementos <object> tengan un nombre accesible. El elemento <object> se ha usado históricamente para incrustar contenido Flash, PDFs u otros medios; sin una etiqueta, los lectores de pantalla no tienen forma de identificar el contenido incrustado.
• svg-img-alt: Comprueba que los elementos <svg> en línea con role="img" tengan un nombre accesible, normalmente proporcionado por un elemento hijo <title> (con un aria-labelledby correspondiente) o un atributo aria-label en la raíz del SVG. Las interfaces modernas usan SVG de forma intensiva para iconos e ilustraciones; esta regla detecta SVG sin etiqueta que tienen significado.
• role-img-alt: Comprueba que cualquier elemento con role="img" —que puede aplicarse a elementos no SVG como <div> o <span> usados como contenedores de imagen— tenga un nombre accesible. Este patrón es común en sistemas de iconos personalizados y en implementaciones con imágenes de fondo en CSS donde no se usa ningún elemento de imagen nativo.
• image-redundant-alt: Señala situaciones en las que el texto alternativo de una imagen duplica texto visible adyacente, normalmente cuando una imagen aparece dentro de un enlace junto con una etiqueta de texto. Aunque no es un fallo grave, el texto alternativo redundante hace que los lectores de pantalla anuncien la misma información dos veces, lo que degrada la experiencia de escucha. Esta regla requiere juicio humano para resolverse correctamente, porque solo una persona puede determinar si la duplicación es realmente redundante o intencionalmente aditiva.

Es importante señalar que las herramientas automatizadas, incluido axe-core, no pueden evaluar la calidad del texto alternativo, solo su presencia y estructura básica. Una regla puede aprobar una imagen con alt="photo" o alt="decorative border" aunque ninguna de las dos sea significativa. Por lo tanto, siempre se requiere una revisión manual junto con el escaneo automatizado para confirmar que el texto alternativo describe con precisión el contenido y el propósito de cada imagen.

Cómo hacer las pruebas

1. Análisis automatizado con axe DevTools o Lighthouse: Instala la extensión de navegador axe DevTools (disponible para Chrome y Firefox). Abre la página que se va a probar, activa la extensión y ejecuta un análisis de página completa. Filtra los resultados por los IDs de regla listados arriba: image-alt, input-image-alt, area-alt, object-alt, svg-img-alt, role-img-alt e image-redundant-alt. Para cada elemento señalado, la herramienta resalta el nodo infractor en el DOM y explica la infracción. Lighthouse (integrado en Chrome DevTools en la auditoría de Accesibilidad) también muestra infracciones de image-alt con detalle a nivel de elemento. Registra todas las infracciones con sus selectores de elemento y contexto circundante para la entrega al equipo de desarrollo.
2. Inspección manual del DOM: Abre el panel Elements de las DevTools del navegador y busca todas las etiquetas <img>, <input type="image">, <area>, <object> y <svg>. Para cada una, verifica que haya un atributo alt apropiado o una etiqueta ARIA y que su valor sea significativo en contexto. Presta especial atención a las imágenes cargadas dinámicamente mediante frameworks JavaScript como React o Vue, que pueden no aparecer en una instantánea HTML estática.
3. Pruebas con lector de pantalla usando NVDA y Firefox: Inicia NVDA (gratuito, Windows) y abre la página en Firefox. Navega usando la tecla G para saltar entre gráficos. NVDA anuncia el nombre accesible de cada imagen; escucha anuncios de rutas de archivo, “imagen” o anuncios vacíos, todos los cuales indican un fallo. Para botones e imágenes enlazadas, usa la tecla Tab para llegar a cada control y verifica que la etiqueta hablada transmita la acción que realiza el control.
4. Pruebas con lector de pantalla usando VoiceOver y Safari (macOS/iOS): Activa VoiceOver (Command+F5 en macOS). Usa VO+Flecha derecha para moverte por el contenido elemento por elemento, o abre el Selector de ítems (VO+U) y selecciona Imágenes en el rotor para ver una lista de todas las imágenes y sus etiquetas a la vez. En iOS, desliza hacia la derecha por la página y escucha cómo se anuncia cada imagen.
5. Pruebas con lector de pantalla usando JAWS y Chrome: En JAWS, pulsa G para navegar por gráficos. Cada imagen debe producir una descripción clara y significativa. Usa el visor virtual de JAWS (Insert+F1) para ver el nombre accesible calculado y el rol de cualquier elemento en cuestión.
6. Verificar el tratamiento de imágenes decorativas: Para las imágenes que consideres decorativas, confirma que tengan alt="" y ningún atributo title ni etiqueta ARIA que las vuelva a exponer. Con un lector de pantalla, navega hasta esos elementos y confirma que se omiten por completo en el orden de lectura.

Cómo corregir

Imagen informativa sin alt — Incorrecto

<!-- Image conveys product information but has no alt attribute -->
<img src='jacket-navy-front.jpg'>

Imagen informativa sin alt — Correcto

<!-- alt text describes the visual content and its purpose in context -->
<img src='jacket-navy-front.jpg' alt='Navy blue wool jacket, front view, with double-breasted buttons'>

Imagen decorativa etiquetada de forma incorrecta — Incorrecto

<!-- Decorative divider image exposes a descriptive alt that adds noise -->
<img src='divider-ornament.png' alt='Decorative ornamental divider with scrollwork pattern'>

Imagen decorativa correctamente oculta a la tecnología de apoyo — Correcto

<!-- Empty alt tells screen readers to skip this image entirely -->
<img src='divider-ornament.png' alt=''>

Icono SVG sin nombre accesible — Incorrecto

<!-- SVG used as a meaningful icon has role="img" but no label -->
<svg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Icono SVG con nombre accesible — Correcto

<!-- title element provides the accessible name; aria-labelledby associates it -->
<svg role='img' aria-labelledby='icon-account-title' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
  <title id='icon-account-title'>My Account</title>
  <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/>
</svg>

Botón de input de imagen sin alt — Incorrecto

<!-- Image submit button has no alt; screen reader announces only "image" -->
<input type='image' src='btn-search.png'>

Botón de input de imagen con alt descriptivo — Correcto

<!-- alt describes the button's function, not its appearance -->
<input type='image' src='btn-search.png' alt='Search'>

Errores comunes

• Usar el nombre de archivo como texto alternativo: Escribir alt="hero_banner_v3_final.jpg" expone la ruta del archivo a los lectores de pantalla sin contenido significativo. Escribe siempre texto alternativo que describa lo que muestra la imagen o el propósito que cumple.
• Configurar el texto alternativo como "image" o "photo": Valores genéricos como alt="image" o alt="photo" superan las comprobaciones automatizadas porque no están vacíos, pero no transmiten información. Los lectores de pantalla ya anuncian el rol del elemento como “imagen”, por lo que repetir esa palabra hace perder tiempo a la persona usuaria.
• Olvidar el alt en imágenes inyectadas dinámicamente: Las imágenes insertadas en el DOM mediante JavaScript (por ejemplo, un carrusel de productos construido con React) pueden carecer de atributos alt en el HTML inicial. Asegúrate de que el componente JavaScript renderice el atributo alt al mismo tiempo que renderiza el src.
• Aplicar role="presentation" a imágenes significativas: Usar role="presentation" o role="none" en imágenes que contienen contenido las elimina por completo del árbol de accesibilidad. Esto solo es apropiado para imágenes puramente decorativas; usarlo en imágenes informativas provoca una pérdida total de contenido para las personas usuarias de lectores de pantalla.
• Omitir el atributo alt por completo en imágenes de fondo CSS usando role="img": Cuando un <div> se estiliza con una imagen de fondo y se le asigna role="img", las personas desarrolladoras a veces olvidan añadir aria-label. Sin una etiqueta, el elemento está en el árbol de accesibilidad como una imagen sin nombre, igual de problemático que un alt ausente.
• Escribir texto alternativo que describe la apariencia en lugar del significado: Para un gráfico, escribir alt="A blue bar chart" describe el estilo visual pero no los datos. El texto alternativo debe transmitir la idea clave, como alt="Bar chart showing Q3 revenue grew 18% year-over-year".
• Texto alternativo duplicado en varias imágenes de un conjunto: Cuando una ficha de producto muestra seis miniaturas del mismo artículo, asignar a todas el mismo texto alternativo (por ejemplo, alt="Running shoe") no permite distinguirlas. Cada imagen de un conjunto debe describir su contenido o ángulo único.
• Falta de alt en elementos <area> de mapas de imagen: Las personas desarrolladoras que usan mapas de imagen suelen añadir texto alternativo a la <img> principal pero olvidan que cada zona activa <area> también requiere su propio atributo alt que describa ese destino de enlace específico.
• Usar el texto de tooltip como sustituto del texto alternativo: El atributo title produce un tooltip visual y es leído por algunos lectores de pantalla, pero la compatibilidad del navegador es inconsistente y no se expone en todos los contextos de accesibilidad. Debe complementar, no sustituir, a un atributo alt adecuado.
• No probar iconos SVG entregados mediante sprites o elementos <use>: Los sprites SVG referenciados mediante <use href="#icon-id"> pueden no exponer su <title> interno a todos los lectores de pantalla debido a los límites del shadow DOM. Prueba siempre los iconos basados en sprites con lectores de pantalla reales y complétalos con aria-label en el elemento <svg> externo cuando sea necesario.

Relación con la normativa de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial nº 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad digital para una amplia gama de entidades públicas y privadas que operan en Turquía. La circular hace referencia a las WCAG 2.2 como su estándar técnico, lo que convierte todos los criterios de éxito de Nivel A —incluido el Criterio 1.1.1 Contenido no textual de las WCAG— en obligaciones legalmente exigibles y no en simples recomendaciones de buenas prácticas.

Las entidades cubiertas incluyen: todas las instituciones públicas y organismos gubernamentales, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria, empresas de telecomunicaciones con 200,000 o más abonados, plataformas de comercio electrónico, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE). Para las instituciones públicas, el cumplimiento debe lograrse en el plazo de un año a partir de la fecha de entrada en vigor de la circular. Las entidades del sector privado disponen de un plazo de implementación de dos años.

El Criterio 1.1.1 de las WCAG es particularmente relevante en el panorama digital turco porque muchos de los sectores de alto tráfico cubiertos por la circular —incluidos los mercados de comercio electrónico, los portales bancarios y las plataformas de servicios gubernamentales— dependen en gran medida de las imágenes. Las fotografías de productos en sitios de comercio electrónico, los anuncios públicos basados en infografías en portales gubernamentales, los paneles financieros llenos de gráficos en aplicaciones bancarias y las interfaces basadas en formularios en portales de pacientes de hospitales entran de lleno en el ámbito de este criterio.

El incumplimiento de los requisitos de Nivel A bajo la circular expone a las entidades cubiertas a escrutinio regulatorio y posibles sanciones. Dado que el Criterio 1.1.1 de las WCAG es uno de los más frecuentemente vulnerados y de los más fáciles de probar —detectable tanto mediante herramientas automatizadas como mediante recorridos básicos con lectores de pantalla— es probable que figure de forma destacada en las auditorías de cumplimiento. Las organizaciones sujetas a la circular deben tratar la corrección de todas las infracciones relacionadas con texto alternativo de imágenes como una tarea inmediata y de alta prioridad, no como una mejora aplazada. Implementar un SDK de superposición de accesibilidad como Accsible puede ayudar a detectar y corregir parcialmente en tiempo real las alternativas textuales ausentes, pero una corrección completa a nivel de código fuente sigue siendo la vía más sólida y duradera hacia el cumplimiento.