Etiquetas de Formulario: Por Qué el Etiquetado Apropiado Importa para Accesibilidad

Introducción

Las etiquetas de formulario son descripciones de texto que identifican el propósito de los campos de formulario. Son esenciales para la accesibilidad porque los lectores de pantalla dependen de etiquetas correctamente asociadas para anunciar qué información espera cada campo. WCAG 2.2 incluye múltiples criterios de éxito relacionados con etiquetas, haciéndolas un requisito crítico de accesibilidad.

Sin etiquetas apropiadas, los usuarios que no pueden ver el diseño visual de tu formulario no sabrán qué información ingresar en cada campo—haciendo tus formularios esencialmente inutilizables para ellos.

¿Qué Son las Etiquetas de Formulario?

El Elemento HTML Label

Las etiquetas se conectan a los inputs de formulario usando el elemento <label>:

<!-- Método 1: Usando asociación for/id -->
<label for="email">Correo Electrónico</label>
<input type="email" id="email" name="email">

<!-- Método 2: Envolviendo el input -->
<label>
  Correo Electrónico
  <input type="email" name="email">
</label>

Tipos de Etiquetado de Formulario

Método	Caso de Uso	Ejemplo
Elemento <label>	Campos de formulario estándar	Inputs de texto, selects, checkboxes
aria-label	Etiquetas visualmente ocultas	Inputs de búsqueda, botones de ícono
aria-labelledby	Etiqueta desde otros elementos	Grupos de formularios complejos
Atributo title	Último recurso solamente	Evitar cuando sea posible
Placeholder	No es una etiqueta	No debe reemplazar etiquetas

Por Qué Importan las Etiquetas

Quién Se Beneficia

1. Usuarios de lectores de pantalla - Las etiquetas se anuncian al enfocar campos
2. Usuarios con discapacidades motoras - Click en etiqueta activa el campo
3. Usuarios con discapacidades cognitivas - Etiquetas claras reducen confusión
4. Todos - Áreas de click más grandes mejoran usabilidad

El Beneficio del Área de Click

Cuando las etiquetas están correctamente asociadas, hacer click en la etiqueta enfoca el input:

<!-- Click en "Acepto los términos" marca el checkbox -->
<input type="checkbox" id="terms">
<label for="terms">Acepto los términos y condiciones</label>

Esto aumenta significativamente el área clickeable—especialmente útil para checkboxes y radio buttons pequeños.

Requisitos WCAG

Criterio	Nivel	Requisito
1.3.1 Información y Relaciones	A	Las etiquetas deben estar asociadas programáticamente
3.3.2 Etiquetas o Instrucciones	A	Los campos de entrada deben tener etiquetas o instrucciones
2.4.6 Encabezados y Etiquetas	AA	Las etiquetas deben ser descriptivas

Problemas Comunes de Etiquetado

1. Etiquetas Faltantes

<!-- MAL: Sin etiqueta en absoluto -->
<input type="text" name="username">

<!-- BIEN: Asociación de etiqueta apropiada -->
<label for="username">Nombre de Usuario</label>
<input type="text" id="username" name="username">

2. Placeholder como Etiqueta

<!-- MAL: Placeholder no es una etiqueta -->
<input type="email" placeholder="Ingresa tu correo">

<!-- BIEN: Etiqueta con placeholder opcional -->
<label for="email">Correo Electrónico</label>
<input type="email" id="email" placeholder="[email protected]">

Por qué los placeholders no son etiquetas:

• Desaparecen cuando el usuario empieza a escribir
• A menudo tienen pobre contraste
• No son anunciados por todos los lectores de pantalla
• Los usuarios pueden olvidar para qué es el campo

3. Etiquetas No Asociadas

<!-- MAL: La etiqueta existe pero no está conectada -->
<label>Nombre Completo</label>
<input type="text" id="nombre">

<!-- BIEN: for/id crea la asociación -->
<label for="nombre">Nombre Completo</label>
<input type="text" id="nombre">

4. IDs Duplicados

<!-- MAL: Ambos inputs tienen el mismo ID -->
<label for="email">Email de Trabajo</label>
<input type="email" id="email">

<label for="email">Email Personal</label>
<input type="email" id="email">

<!-- BIEN: IDs únicos para cada uno -->
<label for="email-trabajo">Email de Trabajo</label>
<input type="email" id="email-trabajo">

<label for="email-personal">Email Personal</label>
<input type="email" id="email-personal">

5. Etiquetas Ocultas Incorrectamente

<!-- MAL: display:none oculta de lectores de pantalla también -->
<label for="buscar" style="display: none;">Buscar</label>
<input type="search" id="buscar">

<!-- BIEN: Visualmente oculto pero accesible -->
<label for="buscar" class="sr-only">Buscar</label>
<input type="search" id="buscar">

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

Probando Etiquetas de Formulario

Prueba Manual Rápida

1. Haz click en cada etiqueta—¿enfoca el input correcto?
2. Navega con Tab por el formulario—¿el lector de pantalla anuncia el propósito de cada campo?
3. ¿Cada campo requerido está claramente marcado?

Usando Herramientas de Desarrollo

Chrome DevTools:
1. Inspeccionar un input de formulario
2. Revisar el panel de Accesibilidad
3. Buscar propiedad "Name"
4. Verificar que coincide con la etiqueta visible

Herramientas Automatizadas

• axe DevTools - Detecta etiquetas faltantes e incorrectamente asociadas
• WAVE - Resalta campos de formulario sin etiquetas
• Lighthouse - Reporta problemas de accesibilidad de etiquetas

Correcciones Rápidas

Agregando Etiquetas a Formularios Existentes

<!-- Antes: Sin etiquetas -->
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
<button>Enviar</button>

<!-- Después: Etiquetas apropiadas -->
<div>
  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" placeholder="Juan Pérez">
</div>
<div>
  <label for="correo">Correo Electrónico</label>
  <input type="email" id="correo" placeholder="[email protected]">
</div>
<button type="submit">Enviar</button>

Etiquetando Inputs Solo con Ícono

<!-- Búsqueda con botón de ícono -->
<label for="buscar" class="sr-only">Buscar</label>
<input type="search" id="buscar">
<button type="submit" aria-label="Enviar búsqueda">
  <svg aria-hidden="true"><!-- ícono de búsqueda --></svg>
</button>

Resumen de Mejores Prácticas

Hacer	No Hacer
Usar elemento <label> con for/id	Usar placeholder como etiqueta
Hacer etiquetas descriptivas y concisas	Ocultar etiquetas con display:none
Usar IDs únicos para cada input	Duplicar IDs en una página
Marcar campos requeridos claramente	Confiar solo en asteriscos
Probar con lectores de pantalla	Asumir que proximidad visual es suficiente

Artículos Relacionados

• Guía de Implementación de Etiquetas - Técnicas detalladas
• Hub de Componentes Accesibles - Guía completa de formularios
• Guía de Etiquetas ARIA - Etiquetado avanzado

---

Referencias

1. W3C - WCAG 2.2 SC 1.3.1 Información y Relaciones
2. W3C - WCAG 2.2 SC 3.3.2 Etiquetas o Instrucciones
3. WebAIM - Creando Formularios Accesibles
4. MDN - El Elemento Label