Técnica Técnicas generales WCAG 2.2
G167Usar un botón adyacente para etiquetar el propósito de un campo
En resumen
Esta técnica permite que un botón situado justo al lado de un campo de entrada (por ejemplo, el botón «Buscar» junto a un cuadro de búsqueda) actúe como etiqueta visible de ese campo, sin repetir texto en la página. Beneficia a todas las personas, que entienden de un vistazo para qué sirve el campo, siempre que el botón tenga un nombre claro y el campo cuente además con un nombre determinable por software. Es adecuada para campos únicos como buscadores o cuadros de mensaje.
Aplicabilidad
Todas las tecnologías que admiten formularios
Descripción
Cuando un botón ejecuta una función sobre un campo de entrada, tiene una etiqueta o nombre textual claro y se presenta junto al campo de entrada, el botón actúa también como etiqueta del campo. Esta etiqueta ayuda a los usuarios a entender el propósito del campo sin introducir texto repetitivo en la página web. Los botones que etiquetan campos de texto únicos suelen ir detrás del campo de entrada.
El campo debe tener además un nombre determinable por software, conforme al criterio de conformidad 4.1.2 Nombre, función y valor.
Ejemplos
Una función de búsqueda
Una página web contiene un campo de texto en el que el usuario puede introducir términos de búsqueda y un botón etiquetado «Search» (Buscar) para realizar la búsqueda. El botón está situado justo después del campo de texto, de modo que al usuario le queda claro que el campo de texto es el lugar donde introducir el término de búsqueda.
Como alternativa, en lugar de un botón con etiqueta textual podría utilizarse un botón etiquetado visualmente con un icono de «lupa», con el texto alternativo «search» (buscar). Las variantes de este icono se utilizan para identificar los campos de búsqueda no solo en sitios web, sino también en las interfaces de usuario de programas que no son web.
Un campo de «responder» o «enviar mensaje»
Las aplicaciones web de chat o de correo electrónico suelen presentar a los usuarios un campo de texto de una o varias líneas para redactar un mensaje. El campo no tiene una etiqueta de texto visible, pero su propósito (redactar un mensaje para enviarlo) queda indicado por su emparejamiento con un botón representado por un icono de «enviar mensaje». El icono cumple la doble función de etiquetar visualmente el botón y el campo de texto.
Elegir un formulario
Un usuario de Estados Unidos debe rellenar un formulario. Como las leyes y los requisitos son distintos en cada estado de Estados Unidos, el usuario debe seleccionar la versión del formulario correspondiente a su estado de residencia. Una lista desplegable permite al usuario elegir un estado. El botón adyacente está etiquetado «Get Form for State» (Obtener el formulario del estado). Al pulsar el botón, el usuario accede a la página web que contiene el formulario del estado seleccionado.
Pruebas
Procedimiento
Para un campo y un botón que utilizan esta técnica:
- Comprobar que el campo y el botón son adyacentes en la secuencia de lectura determinada por software.
- Comprobar que el campo y el botón se presentan visualmente adyacentes.
- Cuando el botón no tenga una etiqueta de texto visible, comprobar que tiene un nombre accesible
Resultados esperados
- Todas las comprobaciones son verdaderas.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G167 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
