Iconos, emojis, SVG y CAPTCHA

No todo el contenido no textual es una fotografía con su etiqueta <img>. Los iconos de fuentes, los emojis, los gráficos SVG en línea y los CAPTCHA son contenido no textual con sus propias trampas, y en los cuatro casos el criterio 1.1.1 Contenido no textual se aplica igual. Esta lección repasa cómo tratar cada uno desde la redacción y el diseño, con el código que conviene pedir al equipo de desarrollo.

Iconos

Los iconos se insertan de varias formas: como imagen, como SVG en línea, como fuente de iconos (Font Awesome, Material Icons) o como carácter Unicode. La pregunta es siempre la misma: ¿es decorativo o transmite información o función?

• Icono decorativo junto a texto: el icono de un teléfono delante de «Teléfono: 968 00 00 00». Debe ocultarse a la tecnología de apoyo: alt="" si es imagen, aria-hidden="true" si es fuente de iconos o SVG.
• Icono que es el único contenido de un botón o enlace: necesita nombre accesible: aria-label en el botón, texto visualmente oculto o <title> en el SVG.
• Icono que aporta información sin texto: un check verde que significa «disponible»: necesita alternativa textual («Disponible»).

<!-- Incorrecto: botón sin nombre, el lector dirá solo «botón» -->
<button><i class="fa fa-search"></i></button>

<!-- Correcto: icono oculto, nombre en el botón -->
<button aria-label="Buscar">
  <i class="fa fa-search" aria-hidden="true"></i>
</button>

<!-- Mejor aún: texto visible -->
<button>
  <i class="fa fa-search" aria-hidden="true"></i> Buscar
</button>

Las fuentes de iconos tienen un problema añadido: si la persona usuaria fuerza su propia tipografía (habitual con dislexia o baja visión), el icono puede convertirse en un cuadrado. Por eso SVG es hoy la opción preferida. Los iconos informativos deben cumplir además 1.4.11 Contraste no textual (3:1).

Emojis

Los lectores de pantalla leen los emojis con su nombre Unicode: «cara sonriendo con ojos sonrientes», «fuego», «manos aplaudiendo». Un texto con cinco emojis seguidos se convierte en una frase larguísima; un emoji usado en lugar de una palabra puede cambiar el sentido. Reglas prácticas:

• Usa pocos emojis y colócalos al final de la frase, no en medio ni sustituyendo palabras.
• No repitas el mismo emoji varias veces seguidas.
• No uses emojis como viñetas de lista ni como único indicador de estado (un círculo verde o rojo sin texto).
• Evita los «textos decorados» con caracteres Unicode especiales (𝓵𝓮𝓽𝓻𝓪𝓼 𝓮𝓷 𝓬𝓾𝓻𝓼𝓲𝓿𝓪, letras invertidas): el lector de pantalla los lee como símbolos matemáticos, uno a uno, o no los lee en absoluto.
• En HTML, un emoji con significado puede envolverse en <span role="img" aria-label="advertencia">⚠️</span> para controlar lo que se anuncia.

SVG

El formato SVG es ideal para iconos, logotipos y gráficos porque escala sin perder nitidez y, si sus colores usan currentColor, se adapta al modo de contraste forzado. Pero su accesibilidad depende de cómo se inserte:

• Como <img src="icono.svg">: se trata como cualquier imagen; manda el alt.
• SVG en línea (<svg> dentro del HTML): si es informativo, añade role="img" y un <title> como primer hijo, vinculado con aria-labelledby; para una descripción más larga, <desc>. Si es decorativo, aria-hidden="true" y focusable="false" (este último evita que algunas versiones de navegadores le den foco).

<!-- SVG informativo en línea -->
<svg role="img" aria-labelledby="t1" viewBox="0 0 24 24">
  <title id="t1">Accesible para personas en silla de ruedas</title>
  <path d="…"/>
</svg>

<!-- SVG decorativo en línea -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>

Para un gráfico SVG complejo (una gráfica generada con D3, un mapa) se aplica lo visto en la lección anterior: alternativa textual estructurada fuera del SVG, porque la navegación por el interior de un SVG con lector de pantalla es poco fiable.

CAPTCHA

Un CAPTCHA (prueba para distinguir personas de robots) es, por definición, contenido no textual que no se puede describir sin anular su función. El criterio 1.1.1 lo contempla como excepción, pero con dos condiciones: debe tener una alternativa textual que identifique su propósito («Prueba de verificación de que eres una persona») y deben ofrecerse versiones alternativas en distintas modalidades sensoriales (por ejemplo, imagen y audio) para atender a distintas discapacidades.

En la práctica, los CAPTCHA de texto distorsionado son una barrera enorme: excluyen a personas ciegas (si no hay audio), a personas con baja visión y dislexia (la distorsión está pensada para dificultar la lectura), y a personas sordociegas (ni imagen ni audio les sirven). Las alternativas de audio suelen ser casi ininteligibles. Opciones mejores, de más a menos recomendable:

1. Verificación sin interacción: análisis de comportamiento del lado del servidor, campos trampa invisibles (honeypot), límites de frecuencia. No hay nada que resolver.
2. Verificación con un solo clic («No soy un robot»), que recurre a un reto solo en casos dudosos y ofrece alternativa de audio y asistencia.
3. Preguntas lógicas sencillas («¿Cuánto es tres más cuatro?») con texto real, aunque pueden ser una barrera cognitiva.
4. CAPTCHA de imagen con audio: la última opción, nunca la única.

Ten en cuenta también el criterio 3.3.8 Autenticación accesible (mínimo), nuevo en WCAG 2.2: ningún paso de autenticación puede exigir una prueba de función cognitiva (recordar, transcribir, resolver un puzle) sin alternativa, salvo reconocimiento de objetos o de contenido personal. Un CAPTCHA que pide transcribir texto distorsionado en un inicio de sesión incumple este criterio; uno de «selecciona las imágenes con semáforos» entra en la excepción, aunque sigue siendo una barrera para personas ciegas que debe cubrirse con otra alternativa.

Resumen

• Iconos decorativos: aria-hidden="true"; iconos funcionales solos en un botón: nombre accesible con aria-label o texto; preferible SVG a fuentes de iconos.
• Emojis: pocos, al final, sin sustituir palabras ni servir de viñetas; nada de textos con caracteres Unicode decorativos.
• SVG en línea informativo: role="img" y <title>; decorativo: aria-hidden="true".
• CAPTCHA: 1.1.1 exige identificar su propósito y ofrecer alternativas en distintas modalidades; 3.3.8 prohíbe pruebas cognitivas sin alternativa en la autenticación.
• La mejor alternativa al CAPTCHA es no necesitarlo: honeypots, límites de frecuencia y verificación del lado del servidor.