Etiquetas de formulario

¿Qué es una etiqueta de formulario?

Una etiqueta de formulario (elemento HTML <label>) es el texto que describe el propósito de un campo de entrada: «Nombre», «Correo electrónico», «Teléfono». Visualmente, es el texto que aparece al lado o encima del campo. Técnicamente, tiene que estar asociado programáticamente al campo con el atributo for.

El criterio WCAG 4.1.2 exige que todos los componentes de la interfaz de usuario tengan un nombre accesible. Para los campos de formulario, esto significa que cada campo tiene que tener una etiqueta que el lector de pantalla pueda lea cuando el usuario llega.

¿Cuál es el problema cuando no hay etiquetas?

Imagínate llenando un formulario de contacto mientras un lector de pantalla te lee el contenido. Sin etiquetas correctas, el lector de pantalla dice «editar texto» al llegar a un campo, sin indicar si es el nombre, el email o el teléfono. El usuario no sabe qué campo está llenando.

El placeholder —el texto gris dentro del campo que desaparece cuando escribes— no es una alternativa válida a la etiqueta. Por dos razones: primero, desaparece al empezar a escribir, y el usuario no puede revisar qué campo estaba llenando. Segundo, muchos lectores de pantalla no leen el placeholder como etiqueta del campo.

Como asociar correctamente una etiqueta en un campo

Método 1: for e id

El método estándar es usar el atributo for a la etiqueta que coincida con el atributo id del campo. Cuando el lector de pantalla llega al campo, lee automáticamente la etiqueta asociada.

<label for="email">Correu electrònic</label>
<input type="email" id="email" name="email">

Método 2: etiqueta envolviendo el campo

La etiqueta puede rodear el campo directamente, sin necesidad de usar for y id:

<label>
Correu electrònic
<input type="email" name="email">
</label>

Método 3: aria-labelo

Para casos donde la etiqueta visible no es posible (como un campo de búsqueda con botón), se puede usar aria-labelo:

<input type="search" aria-label="Cercar al web">

Errores habituales en WordPress

Gravity Forms, el plugin de formularios más usado en WordPress, genera etiquetas correctas por defecto. Pero hay situaciones donde los formularios pierden las etiquetas:

• Formularios creados manualmente con HTML sin añadir los labels.
• Plugins de formularis de tercers que usen placeholder com a única referència.
• Formularios de Divi con los campos configurados sin label visible y sin aria-labelo.
• Formularios importados otras herramientas sin revisar la accesibilidad.

El caso de los botones de enviar

El botón de enviar del formulario también tiene que tener texto accesible. Un botón con texto «Enviar» es correcto. Un botón con un icono de flecha sin texto necesita aria-labelo=»Enviar formulario» para ser accesible.

Como detectar formularios sin etiquetas

La herramienta de autoevaluación de webaccessible.cat identifica campos de formulario sin etiquetas asociadas. El informe indica qué campos están afectados y su ubicación en la página, permitiendo corregirlos de forma priorizada.