HTML
Cómo asociar labels con controles y construir nombres accesibles claros para inputs, botones, selects y otros elementos de formulario.
Todo control necesita un que explique qué dato o acción representa.
<label for="email">Correo electrónico</label>
<input id="email" name="email" type="email"><label for="phone">Teléfono</label>
<input id="phone" name="phone" type="tel">for debe coincidir con un id único. Activar el label amplía el objetivo y lleva foco al control.
<label>
Teléfono
<input name="phone" type="tel">
</label>Es válida. La explícita suele ser más flexible y fácil de inspeccionar.
<input type="email" placeholder="Correo electrónico">El placeholder desaparece al escribir, suele tener menor contraste y puede confundirse con un valor real.
Correcto:
<label for="email">Correo electrónico</label>
<input id="email" name="email" type="email" placeholder="nombre@empresa.com">El placeholder muestra formato o ejemplo; el label identifica el control.
<button type="button" aria-label="Cerrar">
<svg aria-hidden="true">...</svg>
</button>Aporta un nombre cuando no hay texto visible apropiado.
No lo utilices para ocultar un label que podría mostrarse. Si existe texto visible, evita un aria-label diferente que provoque inconsistencia.
<h2 id="billing-title">Dirección de facturación</h2>
<div role="group" aria-labelledby="billing-title">...</div>Permite construir el nombre desde contenido visible existente.
Puede referenciar varios IDs:
<input
id="price"
aria-labelledby="price-label currency"
>
<span id="price-label">Precio</span>
<span id="currency">en pesos colombianos</span><label for="password">Contraseña</label>
<input
id="password"
name="password"
type="password"
aria-describedby="password-help"
>
<p id="password-help">Mínimo 12 caracteres.</p>La descripción complementa el nombre; no lo reemplaza.
<input
id="email"
aria-describedby="email-help email-error"
aria-invalid="true"
>
<p id="email-help">Usa tu correo principal.</p>
<p id="email-error">Ingresa un correo válido.</p>Cuando el error aparece dinámicamente, comunica el cambio de forma perceptible y mueve foco solo cuando mejora el flujo.
Un control puede tener más de un label asociado, pero puede producir nombres repetitivos. Normalmente utiliza un label principal y descripciones separadas.
<fieldset>
<legend>¿Cómo prefieres recibir novedades?</legend>
...
</fieldset>El legend nombra el grupo; cada checkbox o radio conserva su label individual.
Un label puede ocultarse visualmente manteniéndose disponible cuando el diseño ofrece suficiente contexto visible.
<label class="visually-hidden" for="site-search">
Buscar en el sitio
</label>
<input id="site-search" type="search" name="q">No uses display: none, hidden o visibility: hidden, porque eliminan el contenido de la experiencia accesible.
En controles con texto visible, el nombre accesible debería contener ese texto para que usuarios de control por voz puedan decir lo que ven.
Visible:
<button aria-label="Guardar cambios">Guardar</button>El nombre contiene “Guardar”.
Peligroso:
<button aria-label="Confirmar operación">Guardar</button><input type="submit" value="Enviar mensaje">value proporciona el texto y nombre del control. Un elemento button permite contenido más flexible y suele ser preferible.
<div>
<label for="budget">Presupuesto mensual</label>
<input
id="budget"
name="budget"
type="number"
min="0"
step="1000"
aria-describedby="budget-help"
>
<p id="budget-help">Ingresa el valor disponible antes de registrar gastos.</p>
</div>for con un ID inexistente.¿Por qué aria-describedby no sustituye un label?
Porque proporciona información complementaria; el control todavía necesita un nombre que indique qué campo es.
Inputs de texto, email, teléfono, URL y búsqueda compara controles de entrada textual.