Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G167Usar el botón junto a un campo como etiqueta visible del campo

Nombre oficial en el W3C: Usar un botón adyacente para etiquetar el propósito de un campo

En pocas palabras

A veces un campo no tiene etiqueta visible porque el botón de al lado ya explica para qué sirve. Es el caso del buscador con el botón «Buscar». Esta técnica lo permite si el botón está justo después del campo y tiene un nombre claro. El campo debe tener igualmente un nombre para el lector de pantalla.

Por qué es importante

Todo campo necesita una indicación de qué hay que escribir. Si no, las personas con dificultades cognitivas o de visión dudan y se equivocan.

En formularios de un solo campo, poner una etiqueta y además un botón con el mismo texto resulta repetitivo. Un botón bien rotulado justo al lado cumple esa función de etiqueta. Por ejemplo, «Buscar» al lado del buscador o «Enviar» al lado de la caja de mensaje de un chat.

Cómo se hace

  1. Use esta técnica solo en formularios sencillos, con un campo y un botón que actúa sobre él.
  2. Coloque el botón justo después del campo, en pantalla y en el código.
  3. Dé al botón un texto claro, como «Buscar» o «Ver horarios». Si es un icono, como una lupa, póngale un texto alternativo.
  4. Dé también al campo un nombre que reconozcan el navegador y los lectores de pantalla (programas que leen en voz alta la pantalla). Por ejemplo, con aria-label o con una etiqueta oculta visualmente.

Cómo comprobarlo

  1. Compruebe que el botón aparece pegado al campo en la pantalla.
  2. Recorra el formulario con Tab: tras el campo debe llegar directamente al botón.
  3. Si el botón es un icono, compruebe con un lector de pantalla que anuncia un nombre como «Buscar».
  4. Compruebe con el lector de pantalla o con el inspector de accesibilidad del navegador que el campo también tiene nombre.

Ejemplo

Buscador con un campo y un botón «Buscar» justo después:

<form action="/buscar" role="search">
  <input type="search" name="q" aria-label="Buscar en la web">
  <button type="submit">Buscar</button>
</form>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G167 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

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.

Un campo de texto con un botón situado a la derecha que muestra el uso de un botón para etiquetar un campo.

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 patrón habitual de diseño visual y etiquetado para los campos de búsqueda: un campo de texto con un botón, representado visualmente con el icono habitual de una lupa, situado al principio (a la izquierda) del campo de texto. El icono sirve para etiquetar tanto el botón como el campo de texto.

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.

Campo de texto que contiene el texto «let's go». El campo tiene un botón superpuesto visualmente en su lado derecho. El botón es circular y contiene un icono de flecha que también recuerda a un avión de papel, que cada vez se usa más como identificador de «enviar mensaje».

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:

  1. Comprobar que el campo y el botón son adyacentes en la secuencia de lectura determinada por software.
  2. Comprobar que el campo y el botón se presentan visualmente adyacentes.
  3. 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 cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G167 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.