Botón “Buscar” o icono de lupa. Actualización de la técnica G167 en 2025 y su impacto en los criterios 3.3.2 y 2.4.6 de las WCAG 2.2

WCAG 2.2 nivel A Criterio 3.3.2 Etiquetas e instrucciones. Técnica G167. Usar un botón adyacente para etiquetar el propósito de un campo. Se muestra el patrón de campo de texto más botón de búsqueda. En 2024 el botón debía tener texto; en 2025 se admite el icono de lupa.

Introducción

El documento normativo de las WCAG 2.2, el estándar técnico y referenciable, es un documento muy estable. Desde su publicación el 5 de octubre de 2023 solo se ha actualizado una vez: el 12 de diciembre de 2024. Fue para corregir erratas menores, tal y como comenté en el artículo “Modificaciones en la nueva publicación de las WCAG 2.2 del 12 de diciembre de 2024”. Ninguno de esos cambios afectaba a la interpretación de los criterios ni a su auditoría.

Sin embargo, la situación es distinta en la documentación asociada a las WCAG 2.2, como la de cada criterio o técnica, ya que esta documentación se actualiza con frecuencia. Este trabajo de mejora continua es público y puede seguirse en GitHub: W3C. WCAG.

Estar al día de estas actualizaciones es esencial para auditar correctamente y no reportar falsos positivos o negativos.

Si usas validadores automáticos para ayudarte en la evaluación, es importante conocer estas modificaciones por la misma razón, ya que la herramienta puede no estar actualizada y generar resultados incorrectos.

En este artículo analizo un ejemplo reciente que ilustra perfectamente esta necesidad: la actualización en 2025 de la técnica G167 “Using an adjacent button to label the purpose of a field” del criterio de conformidad 3.3.2: Etiquetas o instrucciones (Nivel A).

Tradicionalmente, esta técnica solo permitía que la etiqueta visible de un campo la aportara un botón adyacente si dicho botón tenía un texto. Sin embargo, en 2025 se amplió el alcance de la técnica para aceptar también iconos, siempre que tengan un nombre accesible adecuado.

Este cambio provocó también la actualización de la documentación del criterio 3.3.2 y del criterio 2.4.6.

Técnica G167 en 2024

El criterio 3.3.2 A indica que todo campo de formulario debe tener una etiqueta visible, pero establece como excepción que, en algunos casos, el botón adyacente puede actuar como etiqueta visible, por lo que no sería necesario que el campo tuviera otra etiqueta adicional.

La técnica que recoge esta posibilidad es la Técnica G167: Usar un botón adyacente para etiquetar el propósito de un campo.

La versión de esta técnica en 2024 se puede consultar en: Technique G167: Using an adjacent button to label the purpose of a field (versión 2024).

El ejemplo típico es un campo de búsqueda en la cabecera de un portal, o en las cabeceras de una tabla dinámica. Si el campo va acompañado de un botón adyacente con el texto "Buscar", este actúa como etiqueta visible y se entiende visualmente que es un campo de búsqueda.

Hasta 2024 se especificaba claramente que el botón debía tener texto para que fuera válido, no un icono:

Captura de la técnica G167 en 2024. Abrir imagen más grande

Pero en muchos proyectos nos encontrábamos con el campo de búsqueda y el icono de lupa.

Esto generaba muchas preguntas:

¿Deberíamos considerar el icono de lupa también una etiqueta visible para el campo?
¿Todas las personas entienden hoy en día el patrón de campo de texto más botón lupa?
¿La comprensión del icono no sería un aspecto a tener en cuenta en el criterio 2.4.6?
Si se aceptara el caso del icono lupa, ¿no deberían aceptarse también otros casos habituales de campo más icono, como en los chats?
¿Lo aceptamos entonces para otros casos y delegamos en el criterio 2.4.6 la comprensión del icono?

Este tipo de debates son los que surge en GitHub: W3C. WCAG y son de consulta pública.

Técnica G167 en 2025

El debate concluyó en que se acepta el icono como etiqueta visible.

Ahora, en 2025, la técnica incluye varios ejemplos de campo de texto sin etiqueta más un botón de icono que funciona como su etiqueta visible:

un campo de búsqueda y un icono de lupa
un campo de texto en un chat con un botón de flecha para enviar el mensaje

Captura de la técnica G167 en 2025. Abrir imagen más grande.

En consonancia, se actualizó el procedimiento de prueba de la técnica. Se mantiene que es necesario que el botón esté adyacente en el orden de lectura, pero se añade un tercer punto que admite un icono si tiene un nombre accesible:

Procedimiento

Para un campo y un botón usando esta técnica:

Compruebe que el campo y el botón estén adyacentes entre sí en la secuencia de lectura determinada programáticamente.
Compruebe que el campo y el botón se muestren visualmente adyacentes entre sí.
Cuando el botón no tenga una etiqueta de texto visible, verifique que tenga un nombre accesible

Además, el ejemplo del campo de búsqueda más el icono de lupa se ha incluido también en la documentación del criterio de conformidad 3.3.2: Etiquetas o instrucciones (Nivel A).

Por otra parte, a raíz de esta discusión, se modificó también la documentación del criterio 2.4.6 Encabezados y etiquetas (AA). La documentación de este criterio indica ahora que una misma imagen puede interpretarse de forma diferente en distintos contextos, pero que puede considerarse descriptiva si su uso se entiende comúnmente en cada contexto:

Por ejemplo, un icono de lupa que acompaña a un campo de texto se suele interpretar como que el campo sirve para introducir y enviar una consulta de búsqueda.
Por ejemplo, un icono de lupa colocado sobre o cerca de otra imagen se interpreta comúnmente como un medio para ver una versión ampliada de la imagen.

El criterio 2.4.6 siempre ha tenido cierto grado de subjetividad, y este añadido no es una excepción.

La “comprensión común” de un patrón conlleva un factor subjetivo y contextual que puede requerir validación con personas usuarias reales.

Conclusiones

Como hemos visto, aunque el documento normativo de las WCAG 2.2 es muy estable, la documentación complementaria cambia con mayor frecuencia. Por ello, es fundamental revisar estas actualizaciones con regularidad para evitar interpretar de forma incorrecta un criterio y reportar falsos positivos o negativos en una auditoría.

La actualización de la técnica G167 en 2025 es un ejemplo muy claro que ilustra la importancia de estar al tanto de los debates y las actualizaciones de los grupos de trabajo que tienen en cuenta, por ejemplo en este caso, la evolución o generalización de ciertos patrones de diseño.

Si quieres compartir otros casos relevantes de modificaciones recientes de criterios o técnicas de las WCAG, te animo a participar en los comentarios.