Otras ocurrencias — Elementos no textuales e indicadores de foco
Cuando analizamos una página, el mismo problema suele aparecer muchas veces. Una barra de navegación con 8 botones que usan todos el mismo azul deslavado no son 8 problemas distintos: es un problema repetido 8 veces.
Así que en lugar de publicar 8 hallazgos separados, el reporte publica:
- 1 hallazgo principal — con la explicación completa, la captura y la corrección recomendada.
- 7 "otras ocurrencias" — una lista numerada debajo, cada una apuntando a su propio elemento de la página.
Piénsalo como el ticket de un supermercado: no imprime "manzana" seis veces en seis líneas. Imprime "manzana × 6". La misma información, con muchísimo menos ruido.
Por qué lo hacemos: quien lee el reporte corrige el problema una vez —normalmente una línea de CSS— y queda resuelto en todas partes. Mostrar 8 tickets con la misma recomendación hace que el reporte se vea peor de lo que el sitio realmente está, entierra los problemas que sí son distintos, y le hace perder el tiempo a quien revisa leyendo el mismo párrafo ocho veces.
Dos cosas se cumplen siempre, sea cual sea el caso:
- La primera ocurrencia encontrada al leer la página de arriba abajo se convierte en la principal. Es la que el usuario verá primero al abrir la página.
- Cada ocurrencia de la lista conserva su propia ubicación y su propio nombre, de modo que cada una se puede seguir localizando y resaltando individualmente en la página.
Caso 1 — Elementos no textuales
Son las partes visuales de una página que transmiten significado sin usar palabras: íconos, bordes de campos de entrada, fondos de botones, checkboxes, interruptores, barras de progreso, segmentos de gráficos.
Qué determina que dos ocurrencias sean "la misma": el par de colores implicados en el problema — el color del propio elemento y el color que tiene justo detrás o al lado. Si dos elementos muestran la misma pareja de colores, se tratan como el mismo problema.
Aquí importan dos detalles.
Los colores se normalizan antes de comparar. El mismo color se puede escribir de varias formas (#EEEEEE, rgb(238, 238, 238), más la información de transparencia). Antes de comparar, cada color se reescribe en una única notación estándar y se descarta la transparencia. Es como comparar dos números de teléfono después de quitar espacios y guiones: 555 123-4567 y 5551234567 son evidentemente el mismo número, pero solo cuando le quitas el formato.
Para la revisión general de contraste en elementos no textuales, la comparación es por nombre de color, no por el tono exacto. Se usa una lista compartida de 13 nombres de color —negro, blanco, gris, rojo, naranja, amarillo, verde, verde azulado, cian, azul, morado, rosa, marrón— y cada color de la página se clasifica en el más cercano. Es la misma lista que ya se usa para el texto. La analogía: no archivas dos camisas como "azul marino #1F3A93" y "azul marino #22417F"; archivas las dos como "azul". Así, dos botones cuyos azules difieren en una cantidad que nadie percibe caen en el mismo grupo en lugar de producir dos hallazgos casi idénticos.
Las revisiones más estrictas —el color de foco de un elemento contra su fondo, una pestaña seleccionada contra una sin seleccionar, el borde de un control contra su entorno— exigen que los colores coincidan exactamente, no solo por nombre. En esos casos una pequeña diferencia de tono sí puede ser un problema distinto con una corrección distinta, así que no se mezclan.
Una salvaguarda adicional: en los controles que se comparan contra su entorno, el tipo de problema también tiene que coincidir. Un hallazgo de "tu estado seleccionado no se ve lo suficiente" nunca se fusiona con uno de "tu borde no se ve lo suficiente", aunque los colores encajen. Mismos colores, síntoma distinto, corrección distinta.
Caso 2 — Indicadores de foco
Un indicador de foco es la marca visual que muestra qué elemento está seleccionado cuando alguien navega con la tecla Tab en lugar del ratón — normalmente un anillo, un contorno o un cambio de color de fondo. Sin él, quien usa teclado escribe a ciegas.
Aquí la agrupación no se basa en de qué color es el elemento. Se basa en qué cambia cuando tabulas hasta él.
Qué determina que dos ocurrencias sean "la misma": la transición de color antes → después, más qué propiedad visual cambió.
- Seis enlaces de navegación que pasan todos del mismo azul al mismo azul más claro al recibir foco → un grupo. Misma transición, una corrección.
- Dos botones que pasan de ese mismo azul de partida a un azul claro distinto → grupo aparte, porque el color de destino difiere.
- Un botón cuyo borde cambia nunca se fusiona con un botón cuyo fondo cambia, aunque los colores sean idénticos: propiedad distinta, corrección distinta.
Aquí los colores de antes y después deben coincidir exactamente, no por nombre de color. Esta revisión mide si la diferencia entre los dos estados es lo bastante grande como para notarse. Redondear los tonos a un nombre difuminaría justo aquello que se está midiendo — como redondear la estatura de dos personas a "alto" y después intentar decir cuál es más alta.
Un caso especial: los elementos sin ningún indicador de foco se fusionan en un único hallazgo, sean del color que sean. No hay transición de color que comparar, porque no hay transición: eso es precisamente el fallo. Todo lo que comparte esa misma ausencia total va a un mismo sitio.
La diferencia en una línea
| Se agrupa por | Coincidencia de color | |
|---|---|---|
| Elementos no textuales | Los colores que el elemento muestra ahora mismo — el elemento y lo que tiene detrás | Por nombre de color en la revisión general de contraste (la lista compartida de 13 nombres, la misma que para texto); exacta en las revisiones de estado más estrictas |
| Indicadores de foco | El cambio de color antes → después de tabular hasta él, más qué propiedad cambió | Exacta — el tamaño del cambio es lo que se está midiendo |
| Indicador de foco ausente | Nada — todos se fusionan | No aplica, no hay colores implicados |
En corto: en los elementos no textuales preguntamos "¿cómo se ve?"; en los indicadores de foco preguntamos "¿qué hace cuando tabulas hasta él?" — y cuando la respuesta es "nada en absoluto", todos se convierten en un solo hallazgo.