Qué mira la revisión de contraste no textual
Antes de poder medir si un ícono se ve lo suficiente, la herramienta tiene que decidir qué cosas de la página cuentan como "controles de solo ícono". Esa lista corta es lo único que llega a examinar la medición de contraste no textual.
No es una lista fija de tipos de elemento que alguien escribió una vez. Se construye desde cero, en cada página, en cada ejecución. Piénsalo como la lista de invitados de un club: el personal de la puerta la arma de nuevo cada noche. A quien está en la lista se le mide. Quien no está, no existe para la revisión.
Entender cómo se construye esa lista es lo que mejor predice qué va a encontrar la revisión y qué no.
Cómo se construye la lista: un embudo con cuatro filtros
Filtro 1 — El grupo inicial
La herramienta le pide al navegador su árbol de accesibilidad — la misma descripción de la página que usa un lector de pantalla. De ahí, una cosa sigue en carrera si o bien:
- puede recibir el foco del teclado, o bien
- está etiquetada como botón, enlace, pestaña, elemento de menú o búsqueda.
⚠️ Si un candidato no se puede vincular de vuelta con algo real de la página, se descarta sin decir nada — y todo lo que esté anidado dentro se descarta también. Un solo contenedor que no se pueda resolver puede sacar en silencio una región entera de la página de la lista.
Filtro 2 — "¿Tiene palabras dentro?"
Cada candidato se juzga después con una regla mecánica. Se queda solo si está visible y no tiene palabras con significado dentro. "Sin palabras con significado" quiere decir:
- nada en absoluto, o
- uno o dos caracteres sin letras —
0,11,+,-(se leen como insignias, no como etiquetas), o - un nombre de código de fuente de íconos — texto con la forma de
keyboard_arrow_rightochevron_left: todo en minúsculas, unido con guiones bajos. En pantalla se dibujan como una imagen, no como texto.
Si sí tiene palabras, le queda una segunda oportunidad: ¿usa él, o algo dentro de él, una fuente de íconos reconocida? Esa lista se mantiene a mano y contiene exactamente ocho familias — Material Icons y Material Symbols, Font Awesome, Glyphicons, IcoMoon, Ionicons, Dashicons, Genericons, Typicons. Si es así, se queda.
Todo lo que no pasa este filtro desaparece. La IA ni se entera de que existía.
Filtro 3 — El voto de la IA
Se toma una imagen de la página completa con un contorno rojo alrededor de cada superviviente y se envía a un modelo de visión. La pregunta es estrecha: "¿cuáles de estas cajas rojas no contienen texto visible dentro de la caja?" — más dos preguntas laterales por elemento: ¿esto es una foto o ilustración? y ¿esto es un logo de marca?
Al modelo se le dice, en mayúsculas, "ante la duda, repórtalo: preferimos falsos positivos a issues perdidos."
La respuesta se guarda asociada a una instantánea de la página, así que una página idéntica no paga una segunda llamada a la IA.
Filtro 4 — La doble comprobación de vuelta en la página real
Todo lo que la IA nombró se vuelve a examinar contra la página en vivo y se descarta si:
- no se puede vincular de vuelta con algo real de la página;
- es una foto o ilustración (excluidas por defecto);
- es un logo de marca (excluido por defecto — salvo que sea en sí mismo un enlace o un botón, en cuyo caso se conserva);
- no es un botón, un enlace, ni algo etiquetado como botón / enlace / pestaña;
- es un campo de formulario nativo;
- es totalmente transparente;
- la regla de "sin palabras con significado" falla en una segunda lectura;
- todo lo visible dentro es una imagen — el clásico enlace-imagen, tratado como tema de texto alternativo y no de contraste.
Lo que sobrevive es la lista final.
Entonces: qué está en la lista y qué no lo está nunca
En la lista
- Botones, enlaces y pestañas de solo ícono: menús hamburguesa, flechas y chevrones, ✕ de cerrar, lupa de búsqueda, íconos de compartir y de redes.
- Íconos dibujados como gráficos vectoriales, o mediante alguna de las ocho fuentes de íconos reconocidas.
- Controles cuyo único "texto" es una insignia numérica pequeña (
0,11) o un símbolo suelto (+). - Un logo — pero solo cuando el logo es en sí mismo el enlace o el botón.
Nunca en la lista
- Cualquier cosa con palabras reales dentro, aunque además contenga un ícono casi invisible (
Download ⬇se descarta entero). - Fotos, ilustraciones, imágenes de producto, miniaturas (desactivadas por defecto).
- Logos sueltos que no sean enlaces ni botones.
- Enlaces de solo imagen — un enlace que envuelve únicamente una imagen.
- Controles totalmente transparentes.
- Gráficos no interactivos — un ícono de estado, un gráfico, un ícono junto a un párrafo. Estos también pueden ser un problema real de accesibilidad, pero quedan fuera de esta revisión por diseño.
- Cualquier cosa que no esté en pantalla cuando se toma la imagen — dentro de un menú cerrado, un modal sin abrir, una diapositiva posterior de un carrusel.
- Cualquier cosa que la IA sencillamente no mencionó en su respuesta.
Por qué esto importa al leer resultados
El paso de medición no busca nada por su cuenta. Abre la lista y la recorre. Si la lista está vacía, reporta éxito y se detiene, con el mensaje "No graphic elements to check for non-text contrast".
Eso tiene una consecuencia que conviene decir sin rodeos:
🔴 La precisión del contraste no textual está limitada por la calidad de esta lista.
Un resultado favorable no afirma que la página esté bien — puede significar igualmente que nada llegó a la lista. No hay ningún camino por el que un control que se quedó fuera de la lista se reporte más adelante.
En concreto:
1. Los filtros corren en un orden fijo, y la IA es el tercero. La regla mecánica de "¿tiene palabras?" corre antes que la IA. Así que la instrucción de "reporta ante la duda" solo se aplica a lo que sobrevivió a la regla mecánica — no puede rescatar nada que la regla ya descartó. Todo ese ajuste generoso, orientado a cubrir más, está aguas abajo del filtro más estricto.
2. La lista de fuentes de íconos son ocho nombres mantenidos a mano. Un sitio que use una fuente de íconos propia o alojada por él mismo que no sea una de esas ocho, y cuyo nombre de código no coincida con la forma minusculas_con_guiones_bajos (por ejemplo icon-close), verá sus íconos leídos como texto real — y el control se descarta. Añadir una fuente de íconos a esa lista aumenta la cobertura directamente; dejar una fuera la pierde directamente.
3. Dos definiciones distintas de "interactivo", y no coinciden. El grupo inicial admite cualquier cosa enfocable, más elementos de menú y búsqueda. La doble comprobación final solo acepta botones, enlaces y pestañas. Así que un elemento de menú de solo ícono, o un widget personalizado enfocable, se recoge, se contornea, se fotografía, se envía a la IA y se paga — y al final se tira. Coste sin cobertura a cambio.
4. Los fallos son silenciosos, y siempre fallan hacia "pasa". Cada vez que algo no se puede resolver o un estilo no se puede leer, el elemento se descarta en silencio en vez de marcarse como "no se pudo revisar". La elección deliberada es "ante un error, asumir que no es un problema, para evitar falsos positivos" — lo que significa que el perfil de riesgo real de esta revisión son issues perdidos, no falsas alarmas, a pesar de que el paso de IA esté ajustado en la dirección contraria.
5. La lista solo vale para la página exactamente como estaba cuando se tomó la imagen. Nada de lo que aparezca tras una interacción está en ella.
Un punto que conviene verificar
Cuando se reutiliza una respuesta de IA en caché —una página ya vista antes— se salta el paso que pinta los contornos rojos. Ese es también el paso que construye el mapa entre la respuesta de la IA y los elementos reales de la página.
Si ese mapa queda vacío al reutilizar la caché, todos los hallazgos guardados fallarían la prueba de "no se puede vincular con algo real" del Filtro 4, dejando la lista vacía. Eso significaría que una segunda ejecución de la misma página reporta cero issues en silencio.
Esto no se ha confirmado contra una página en vivo. Trátalo como "parece una brecha real, conviene verificarlo repitiendo la ejecución sobre la misma URL" y no como comportamiento establecido.