Guía para principiantes: WCAG 1.1.1 y el secreto del contenido no textual accesible

Imaginate por un momento que estás navegando por la web, pero no podés ver las imágenes, los iconos o los gráficos que aparecen en la pantalla. Quizás estás usando un lector de pantalla porque tenés una discapacidad visual, o tal vez tu conexión a internet es tan lenta que las imágenes simplemente no cargan. ¿Cómo sabrías qué información hay en esa foto de un producto en oferta o qué hace ese botón que solo tiene un icono de lupa? Aquí es donde la accesibilidad web deja de ser una opción técnica y se convierte en un puente fundamental para la inclusión.

La accesibilidad web no se trata solo de cumplir con normas legales o técnicas; se trata de personas. Cuando construimos sitios web pensando en la diversidad de formas en que los usuarios interactúan con la tecnología, estamos garantizando que el conocimiento, los servicios y la cultura lleguen a todos sin distinción. Es un compromiso con la equidad digital que transforma la experiencia de navegación para millones de personas en todo el mundo.

En itgrarte fundación, creemos que entender los fundamentos de la accesibilidad es el primer paso para crear un ecosistema digital más humano. Por eso, hoy vamos a desglosar uno de los pilares más importantes de las Pautas de Accesibilidad para el Contenido Web (WCAG): el criterio 1.1.1 sobre el contenido no textual. Si sos desarrollador, diseñador o creador de contenido, esta guía es el punto de partida ideal para que tus proyectos no dejen a nadie afuera.

¿Qué dice WCAG 1.1.1?

El criterio de éxito 1.1.1 de las WCAG, titulado «Contenido no textual», pertenece al principio de «Perceptibilidad». En palabras simples, este criterio nos pide que todo lo que no sea texto (como imágenes, iconos, audios o gráficos) tenga una alternativa textual que cumpla el mismo propósito.

¿Por qué es esto tan importante? Porque los lectores de pantalla (el software que usan las personas ciegas para navegar) no pueden «leer» una imagen, pero sí pueden leer el texto que nosotros le asignemos a esa imagen. Además, las alternativas de texto benefician a personas con dificultades cognitivas que prefieren descripciones simplificadas, ayudan al SEO de tu sitio (Google ama el texto descriptivo) y aseguran que el mensaje llegue incluso si el archivo visual falla al cargarse.

Este criterio se aplica a casi todo lo visual: desde una foto informativa hasta un icono de red social, pasando por gráficos estadísticos complejos y hasta los famosos CAPTCHAs que verifican que no somos un robot. El objetivo es que la información sea redundante: si no puedo verla, puedo leerla o escucharla.

Cómo implementarlo paso a paso

Implementar el criterio 1.1.1 no es solo poner cualquier texto en un atributo. Requiere entender qué función cumple cada elemento visual en tu página. Vamos a ver los casos más comunes con ejemplos reales.

1. Imágenes informativas

Son aquellas que aportan datos o mensajes clave al contenido. Aquí debemos usar el atributo alt para describir de forma concisa lo que la imagen transmite.

<!-- Ejemplo de imagen informativa -->
<img src="perrito-guia.jpg" 
     alt="Un perro labrador dorado con su arnés de guía acompañando a una persona en la vereda.">

2. Imágenes decorativas

Si la imagen es solo para que el sitio se vea «lindo» y no aporta información (como un patrón de fondo o una ilustración genérica), debemos indicarle a las tecnologías asistivas que pueden ignorarla. Para esto, usamos el atributo alt vacío.

<!-- Ejemplo de imagen decorativa -->
<img src="linea-separadora-estetica.png" 
     alt="">

3. Iconos que funcionan como botones

Cuando un botón no tiene texto visible y solo usa un icono (como el de «Cerrar» con una X), necesitamos usar atributos ARIA para darle un nombre accesible.

<!-- Ejemplo de botón con icono -->
<button aria-label="Cerrar modal">
  <span class="icon-x" aria-hidden="true"></span>
</button>

4. Gráficos complejos

Para un gráfico de barras o una infografía, un texto alternativo corto no alcanza. En estos casos, lo ideal es proveer una descripción detallada en el texto que rodea a la imagen o usar un enlace a una página con la tabla de datos correspondiente.

Errores comunes y cómo evitarlos

A veces, con la intención de ayudar, terminamos cometiendo errores que dificultan la navegación. Estos son los más frecuentes:

• Omitir el atributo alt: Si no ponés el atributo alt en absoluto, muchos lectores de pantalla leerán el nombre del archivo (ej. «IMG_2024_FINAL_v2.jpg»), lo cual es una experiencia frustrante. Siempre incluí el atributo, aunque sea vacío.
• Redundancia innecesaria: Evitá empezar las descripciones con «Imagen de…» o «Foto de…». El lector de pantalla ya le avisa al usuario que es una imagen. Sé directo: «Niños jugando en un parque».
• Usar el nombre del archivo como texto alternativo: Poner alt="logo.png" no ayuda a nadie. Lo correcto sería alt="Logo de itgrarte fundación".
• No actualizar el texto alternativo: Si cambiás una imagen que antes mostraba un botón de «Comprar» por uno de «Saber más», pero te olvidás de cambiar el texto alt, el usuario recibirá información contradictoria.
• Texto en imágenes: Intentá evitar poner texto importante dentro de una imagen (como en un banner publicitario). Si es inevitable, ese mismo texto debe estar presente en el alt palabra por palabra.

Cómo testear que tu implementación es correcta

No necesitás ser un experto para empezar a verificar la accesibilidad de tus contenidos. Aquí te dejamos algunas técnicas sencillas:

• Desactivar imágenes: Usá una extensión de navegador (como Web Developer) para desactivar todas las imágenes del sitio. ¿Sigue teniendo sentido la página? ¿Podés leer toda la información relevante?
• Usar lectores de pantalla: Si estás en Windows, probá con NVDA (gratuito); si estás en Mac o iPhone, activá VoiceOver. Navegá tu sitio solo usando el teclado y escuchá cómo se describen tus elementos visuales.
• Herramientas automáticas: Extensiones como WAVE o Axe DevTools pueden detectar rápidamente si faltan atributos alt o si hay errores en las etiquetas.
• Inspección manual: Simplemente pasá el mouse por encima de las imágenes en tu código o usá el inspector de elementos del navegador para confirmar que cada etiqueta tenga su correspondencia textual adecuada.

¿Querés profundizar? Leé la guía avanzada sobre 1.1.1 para conocer técnicas técnicas más complejas como el manejo de CAPTCHAs y descripciones largas mediante ARIA.

Conclusión

Cumplir con el criterio WCAG 1.1.1 es mucho más que una tarea técnica; es un acto de empatía y profesionalismo. Al proporcionar alternativas textuales, estamos asegurando que nuestro mensaje sea universal y que la web siga siendo un espacio abierto para todas las personas, independientemente de sus capacidades. Recordá que una web accesible es una mejor web para todos, incluso para los buscadores y para los usuarios en condiciones de navegación difíciles.

Si sentís que necesitás apoyo profesional para auditar tu sitio o capacitar a tu equipo en estas prácticas, estamos para ayudarte. En itgrarte fundación ofrecemos consultorías especializadas para transformar tu presencia digital. Conocé más sobre nuestro trabajo y cómo podemos colaborar juntos aquí: Servicios de Accesibilidad Web de itgrarte.