WCAG 1.3.3: Haz tu Web Comprensible Sin Depender de los Sentidos

¿Qué dice WCAG 1.3.3?

El criterio WCAG 1.3.3, conocido como «Características Sensoriales», se enfoca en algo fundamental: que las instrucciones en tu sitio web sean comprensibles para todo el mundo, sin depender únicamente de cómo se ven, suenan o dónde están ubicadas. Esto forma parte del principio de Perceptibilidad y de la pauta de Adaptabilidad, buscando que tu contenido se adapte a las necesidades de cada usuario.

En la práctica, esto significa que no podés pedirle a un usuario que «haga clic en el botón redondo» o que «mire el menú de la derecha» si esas son las únicas pistas que le das. Imaginate a una persona ciega o con baja visión: ¿cómo va a identificar un botón por su forma o ubicación visual? Sus herramientas de asistencia, como los lectores de pantalla, no interpretan la forma o el color.

El objetivo es simple: siempre que des una instrucción, asegurate de que haya una forma alternativa de entenderla que no requiera ver colores, formas, tamaños, ubicaciones espaciales, orientaciones, o escuchar sonidos. Si bien el color tiene su propio criterio (el 1.4.1), este punto se refiere a las instrucciones que se basan exclusivamente en estas propiedades sensoriales. Es crucial recordar que usar estas características no es malo, de hecho, puede ser muy útil para muchos, incluidas personas con limitaciones cognitivas. Lo importante es que no sean el único medio para transmitir la información.

Cómo implementarlo paso a paso

Para cumplir con WCAG 1.3.3, la técnica principal que nos sugiere la WCAG es G96: Proporcionar identificación textual de elementos que de otra manera solo dependen de información sensorial para ser entendidos. En pocas palabras, si usás un rasgo visual o sonoro para guiar a tu usuario, siempre acompañalo de una descripción textual clara. Veamos cómo aplicarlo:

• Nombres claros para los controles: En lugar de decir “hacé clic en el botón verde”, decí “hacé clic en el botón ‘Enviar’” y, si querés, añadí “el botón verde”. La clave es que el nombre del botón (su función) sea lo principal.
• Textos descriptivos para elementos visuales: Si una instrucción se refiere a un ícono, como “seleccioná el ícono en forma de estrella”, asegúrate de que el ícono tenga una etiqueta de texto accesible, como “el ícono de ‘Favoritos’”. Para los desarrolladores, esto significa usar atributos aria-label o texto visible que lo acompañe.
• Ejemplo práctico con código:
  Imaginemos un botón que visualmente es solo un ícono de un disquete (para guardar), pero no tiene texto visible. Si la única instrucción es “hacé clic en el botón del disquete”, es inaccesible. Para corregirlo, podemos añadir un aria-label:

  <button aria-label="Guardar documento">
    <img src="icono-disquete.svg" alt="" role="presentation">
  </button>

  Con el aria-label="Guardar documento", los lectores de pantalla anunciarán la función del botón, independientemente de su forma visual.

• Instrucciones de navegación: Si decís “utilizá el enlace de abajo”, asegurate de que el enlace tenga un texto claro como “continuar al siguiente paso” o “ver más detalles”. Para el contexto de lectura, “arriba” y “abajo” se consideran aceptables si el orden de lectura es lógico, pero siempre es mejor ser más explícito.

La esencia es simple: el texto es tu mejor aliado. Siempre que una característica sensorial sea tu principal indicador, preguntate: “¿Cómo describiría esto a alguien que no puede verlo u oírlo?”.

Errores comunes y cómo evitarlos

Cumplir con WCAG 1.3.3 es más fácil una vez que identificás los errores más frecuentes. Aquí te mostramos los “failures” o fallos más comunes y cómo podés evitarlos:

• F14: Identificar contenido solo por su forma o ubicación.
  Este es el error más directo. Si tus instrucciones dicen cosas como:
  • “Hacé clic en el botón rojo de la esquina superior derecha.”
  • “Seleccioná la opción con el círculo.”
  • “Arrastrá el elemento de la izquierda hacia el cuadro de la derecha.”

  Estás dejando afuera a muchos usuarios. Para evitarlo, siempre añadí una identificación textual clara:

  • “Hacé clic en el botón ‘Iniciar sesión’ (el botón rojo en la esquina superior derecha).”
  • “Seleccioná la opción ‘Confirmar’ (la que tiene el círculo).”
  • “Arrastrá el elemento ‘Producto A’ hacia el cuadro ‘Carrito de compras’ a la derecha.”

  La descripción sensorial es un extra, no la única forma de identificarlo.

• F26: Usar un símbolo gráfico solo para transmitir información.
  Otro error común es depender de íconos o imágenes sin ningún texto o alternativa textual que explique su significado. Por ejemplo:
  • Tener solo un ícono de una lupa para la función de búsqueda, sin la palabra “Buscar” visible o un aria-label="Buscar".
  • Usar solo un ícono de un parlante con una línea cruzada para “Silenciar”, sin texto.

  Para evitar este fallo, asegurate de que cada símbolo gráfico que transmite información crucial tenga un equivalente textual. Esto puede ser texto visible al lado del ícono, un atributo alt significativo para imágenes, o un aria-label para elementos interactivos como botones con íconos.

La clave es ofrecer redundancia en la información. Si algo se comunica visualmente, asegúrate de que también se comunique de forma textual.

Cómo testear que tu implementación es correcta

Para asegurarte de que tu web cumple con el criterio de Características Sensoriales, no hay mejor método que ponerse en los zapatos de tus usuarios. Aquí te dejamos algunas formas de testearlo:

• Prueba sin ver: Cerrá los ojos (o usá el teclado sin mirar la pantalla) e intentá seguir las instrucciones que tu sitio web proporciona. Si no podés entender lo que tenés que hacer, es probable que tengas un problema.
• Usá un lector de pantalla: Encendé un lector de pantalla (como NVDA en Windows, VoiceOver en macOS/iOS, o TalkBack en Android) y navegá por tu contenido. Escuchá atentamente cómo se anuncian las instrucciones y los elementos. ¿Se mencionan las formas, colores o ubicaciones como única referencia? ¿O el lector de pantalla puede comunicar la función de cada elemento de forma clara?
• Pedí ayuda a usuarios reales: La forma más efectiva es involucrar a personas con diversas discapacidades, como baja visión o ceguera, para que prueben tu sitio. Ellos te darán una retroalimentación invaluable sobre si tus instrucciones son comprensibles para ellos.
• Revisión de contenido: Para los editores, es fundamental revisar el lenguaje de las instrucciones. Buscá frases que empiecen con “hacé clic en el botón azul”, “mirá el gráfico de la derecha” o “usá el control de arriba”. Si las encontrás, modificalas para que incluyan una referencia textual directa a la función o nombre del elemento.

Este criterio, más allá del código, se enfoca mucho en cómo comunicamos la información. Las pruebas manuales y la revisión de contenido son tus herramientas más poderosas aquí.

Conclusión

Hacer tu web accesible no es solo cumplir con una normativa; es abrir tu contenido a un público más amplio y garantizar que todos puedan interactuar con él de manera efectiva. El criterio WCAG 1.3.3 sobre Características Sensoriales nos recuerda que no debemos dar por sentada la percepción visual o auditiva de nuestros usuarios. Al ofrecer descripciones textuales junto con las indicaciones sensoriales, construimos un puente para que personas con diferentes capacidades puedan navegar, comprender y disfrutar de tu sitio web.

Esta práctica, además de inclusiva, a menudo mejora la claridad para todos. Unas instrucciones bien redactadas y con múltiples vías de comprensión benefician no solo a quienes usan tecnologías de asistencia, sino también a quienes simplemente buscan una experiencia más intuitiva.

Y hablando de hacer que tu contenido sea comprensible para todos, te invitamos a revisar nuestro artículo anterior sobre Secuencia Significativa: WCAG 1.3.2 y el Orden Lógico en tu Web. Ambos criterios trabajan juntos para crear una experiencia verdaderamente adaptable, asegurando que tanto el orden como la forma de presentar la información sean accesibles.

En itgrarte fundación, estamos comprometidos con construir un mundo digital más inclusivo. Si querés llevar la accesibilidad de tu sitio web al siguiente nivel, visitá nuestra sección de servicios de accesibilidad web para saber cómo podemos ayudarte.