Fallo Común F26 de WCAG 2.1: Uso de un símbolo gráfico únicamente para transmitir información

Jano Llorca Lis

El uso de símbolos gráficos es común en interfaces digitales, pero si estos se utilizan sin una alternativa textual o contextual, pueden generar barreras de accesibilidad. Este fallo afecta principalmente a personas con discapacidad visual o que utilizan tecnologías de asistencia como lectores de pantalla. De acuerdo con las WCAG 2.1, Criterio 1.3.3 – Características sensoriales, la información no debe depender exclusivamente de características sensoriales como el color, la forma o los símbolos visuales.

Acerca de este fallo

Este error ocurre cuando un símbolo visual se usa como único medio para transmitir información sin proporcionar una alternativa accesible. Los principales problemas incluyen:

Usuarios con discapacidad visual no pueden percibir el símbolo.
Usuarios con daltonismo o baja visión podrían no diferenciar entre diferentes símbolos.
Usuarios de lectores de pantalla no obtienen información si el símbolo no tiene un atributo alt o aria-label adecuado.

Ejemplos

Ejemplo incorrecto 1: Uso exclusivo de iconos para mostrar el estado de un producto

Código incorrecto:

<p>Estado del producto: <span class="icon-stock"></span></p>
<style>
  .icon-stock { background: url('check.png') no-repeat; width: 20px; height: 20px; }
</style>

🔴 Problema:

La información del estado del producto solo se transmite mediante el icono.
Los usuarios de lectores de pantalla no pueden obtener la información.

Solución correcta

Código corregido:

<p>Estado del producto: <span class="icon-stock" aria-label="Disponible"></span></p>

✅ ¿Qué mejora?:

Se añade aria-label="Disponible" para que los lectores de pantalla puedan interpretar la información.
Se asegura que todos los usuarios tengan acceso a la información, sin depender exclusivamente del icono visual.

Ejemplo incorrecto 2: Uso exclusivo de colores y formas

Código incorrecto:

<p>El círculo indica disponibilidad inmediata, el cuadrado indica que está en espera.</p>
<div class="icono-circulo"></div>
<div class="icono-cuadrado"></div>

🔴 Problema: La información solo se transmite a través de formas visuales, excluyendo a usuarios con discapacidad visual.

Solución correcta

Código corregido:

<table>
  <tr>
    <th>Estado</th>
    <th>Descripción</th>
  </tr>
  <tr>
    <td><span class="icono-circulo" aria-label="Disponible"></span> Disponible</td>
  </tr>
  <tr>
    <td><span class="icono-cuadrado" aria-label="No disponible"></span> No disponible</td>
  </tr>
</table>

✅ ¿Qué mejora?: Se añaden descripciones textuales para que la información esté disponible para todos los usuarios.

Errores comunes y cómo evitarlos

Errores frecuentes:

Usar iconos sin etiquetas alt o aria-label.
Depender solo de símbolos visuales sin proporcionar contexto adicional.
No describir los iconos en el texto de la página.

Cómo evitar estos errores:

Siempre proporcionar una alternativa textual con atributos alt, aria-label o title.
Asegurar que el significado de los símbolos esté presente en el contenido de la página.
Realizar pruebas con tecnologías de asistencia para validar la accesibilidad.

Preguntas frecuentes sobre el fallo común F26

¿Puedo usar iconos en mi diseño?

Sí, pero deben ir acompañados de texto o etiquetas accesibles.

¿Los lectores de pantalla pueden interpretar iconos por sí mismos?

No, a menos que se les asigne un alt o aria-label.

¿Cómo puedo probar si mi sitio tiene este fallo?

Utilizando herramientas como NVDA, JAWS o VoiceOver para verificar si los iconos son interpretables.

¿El uso de emojis entra en este fallo?

Sí, si se usan sin contexto. Los emojis deben acompañarse de texto descriptivo.

¿Los iconos en botones también necesitan texto alternativo?

Sí, los botones deben indicar su función mediante aria-label o texto visible.

Recursos relacionados

Pruebas y validación

Procedimiento:

Identificar todos los símbolos visuales en la interfaz.
Verificar si cuentan con etiquetas alt, aria-label o title.
Probar con un lector de pantalla para ver si los iconos son interpretables.
Validar que la información transmitida por los símbolos también esté presente en el texto de la página.

Resultados esperados:

✅ Si los iconos tienen etiquetas accesibles y la información está disponible en texto, la página cumple con WCAG 2.1.
❌ Si los iconos son la única fuente de información y no tienen etiquetas, la página no es accesible.

El uso de símbolos gráficos debe ser accesible para todos los usuarios. Asegúrate de acompañar cualquier icono con un texto alternativo adecuado. ¿Necesitas ayuda con la accesibilidad de tu web? Contáctanos y optimiza tu sitio para todos los usuarios.

¿Tienes dudas? Solicita una consultoría inicial gratuita

Evaluamos tu sitio web para identificar barreras que dificultan el acceso a personas con discapacidad. Te entregamos un informe con errores detectados y soluciones para que tu web sea usable por todos.