Label

¿Qué es un label?

Un label (etiqueta) es un elemento HTML que proporciona una descripción textual de un campo de formulario, indicando qué información se espera que el usuario ingrese. Los labels son esenciales para la accesibilidad porque:

• Identifican el propósito del campo para lectores de pantalla
• Aumentan el área clickeable del campo
• Mejoran la usabilidad general del formulario

Relación con WCAG 2.1

El Criterio 3.3.2 (Etiquetas o Instrucciones) de WCAG 2.1 Nivel A requiere que se proporcionen etiquetas o instrucciones cuando el contenido requiera entrada de datos del usuario. El Criterio 4.1.2 (Nombre, Rol, Valor) requiere que los controles de interfaz tengan nombres accesibles.

Ejemplos prácticos

✅ Correcto: Label asociado con "for"

<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" required>

✅ Correcto: Label envolviendo el campo

<label>
  Correo electrónico
  <input type="email" name="email" required>
</label>

✅ Correcto: Label con campo y mensaje de error

<label for="password">Contraseña</label>
<input 
  type="password" 
  id="password" 
  name="password"
  aria-describedby="password-error password-help">
<span id="password-help">Mínimo 8 caracteres</span>
<span id="password-error" role="alert" aria-live="polite"></span>

❌ Incorrecto: Sin label

<!-- Campo sin etiqueta asociada -->
<input type="email" name="email" placeholder="Correo electrónico">

❌ Incorrecto: Label no asociado

<!-- Label y campo no están conectados -->
<label>Correo electrónico</label>
<input type="email" name="email">

Errores comunes

1. Usar solo placeholder como label: Los placeholders desaparecen al escribir y no son leídos por algunos lectores de pantalla
2. Label no asociado: Falta el atributo for o el campo no está dentro del label
3. Labels genéricos: "Campo 1", "Entrada" no son descriptivos
4. Ocultar labels visualmente incorrectamente: Usar display: none en lugar de técnicas de ocultamiento accesible
5. Labels duplicados: Tener label visible y aria-label al mismo tiempo

Buenas prácticas

• Siempre usar labels: Todos los campos de formulario deben tener labels
• Asociar correctamente: Usar for y id o envolver el campo
• Ser descriptivo: El label debe indicar claramente qué información se espera
• Incluir instrucciones: Usar aria-describedby para ayuda adicional
• Mantener visible: Los labels deben ser visibles, no solo para lectores de pantalla

Términos relacionados

• [[Campo de formulario]]
• [[Placeholder]]
• [[aria-describedby]]
• [[aria-label]]
• [[WCAG 2.1]]
• [[Criterio 3.3.2]]