# HTML `label`: la solución óptima para una mayor accesibilidad y usabilidad

Con la etiqueta `label` en HTML mejoras la usabilidad de tu página web y facilitas un acceso sin barreras. `label` se utiliza, por ejemplo, para campos de entrada, casillas de verificación y botones de opción. Funciona junto con atributos globales y de evento, así como con los atributos específicos `for` y `form`.

## ¿Para qué se utiliza la etiqueta `label` en HTML?

Para mejorar la claridad y la [accesibilidad en una página web](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/pagina-web-accesible/), la etiqueta [HTML label](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/html-tags/) es especialmente importante. Se utiliza en formularios para asociar textos descriptivos a elementos como campos de entrada, botones de opción o casillas de verificación.

Esto resulta especialmente relevante en dos casos de uso:

- Por un lado, facilita la [navegación en una página web](https://www.ionos.com/es-us/digitalguide/paginas-web/diseno-web/navegacion-web/) a personas que tienen dificultades para interactuar con zonas de interacción pequeñas. Al ampliar la superficie sobre la que se puede hacer clic, se simplifica la interacción con los formularios.
- Por otro lado, para los usuarios que utilizan un [lector de pantalla](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/lectores-de-pantalla-software-para-necesidades-especiales/), la etiqueta HTML `label` permite que el contenido descriptivo se lea en voz alta. Esto mejora la usabilidad y la comprensión de los formularios para todas las personas visitantes de tu página web.

## Relevancia del `label` para las WCAG

Los formularios HTML no solo deben ser comprensibles desde el punto de vista visual, sino también cumplir los estándares actuales de [accesibilidad digital](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/accesibilidad-web/). Las [WCAG](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/directrices-para-la-accesibilidad-web/) (Web Content Accessibility Guidelines) 2.2 vigentes establecen, entre otros requisitos, que todos los campos de entrada deben estar correctamente etiquetados o disponer de instrucciones claras (criterio de conformidad 3.3.2 “Labels or Instructions”). De este modo, se garantiza que las personas con discapacidades cognitivas o visuales entiendan qué información se espera en cada campo.

Además, el criterio de conformidad 2.5.3 de las WCAG (“Label in Name”) exige que la etiqueta visible también esté incluida en el código como nombre accesible. Esto resulta clave para los usuarios que emplean tecnologías de asistencia o sistemas de control por voz.

Nota En Estados Unidos, los requisitos de accesibilidad digital están regulados principalmente por la [Americans with Disabilities Act (ADA)](https://www.ada.gov/ "Americans with Disabilities Act (ADA) ") y la [Section 508 of the Rehabilitation Act](https://www.section508.gov/manage/laws-and-policies/section-508-law/ "Section 508 of the Rehabilitation Act"). En virtud de estas normativas, muchas ofertas digitales, incluidos los formularios en línea, deben diseñarse de forma accesible y utilizable para las personas con discapacidad. En la práctica, **las pautas WCAG se utilizan como estándar técnico** para evaluar si el contenido digital cumple con estos requisitos legales de accesibilidad.

## ¿Cómo se utiliza la etiqueta `label` en HTML?

Existen dos formas de utilizar la etiqueta `label` en HTML. Ambas garantizan que las tecnologías de asistencia, como los lectores de pantalla, reconozcan correctamente la etiqueta y que los usuarios puedan acceder directamente al campo de entrada correspondiente haciendo clic sobre el texto del `label`.

### Vinculación explícita (con `for` e `id`)

En la vinculación explícita, la etiqueta y el campo del formulario se definen por separado en el código HTML, pero se asocian mediante el atributo `for` del `label`, cuyo valor debe coincidir con el atributo `id` del campo de entrada. Esta variante ofrece una compatibilidad especialmente alta con navegadores y tecnologías de asistencia y, por este motivo, se recomienda como buena práctica general.

```html
<p>
    <input type="checkbox" name="leido" id="read" value="si" />
    <label for="read">He leído las condiciones</label>
</p>
```

Es fundamental que el valor del atributo `for` coincida exactamente con el valor del atributo `id`.

### Vinculación implícita (input dentro del `label`)

Como alternativa, puedes colocar el campo de entrada dentro del elemento `<label>`. En ese caso, la vinculación se crea automáticamente, sin necesidad de definir los atributos `for` e `id`. Esta variante también es HTML correcto, pero puede presentar limitaciones de compatibilidad en algunos contextos.

```html
<p>
    <label>
        <input type="checkbox" name="leido" value="si" />
        He leído las condiciones
    </label>
</p>
```

## ¿Qué elementos se etiquetan con la etiqueta HTML `label`?

Por ejemplo, para permitir a los usuarios que utilizan lectores de pantalla acceder a tu página web de forma accesible, en HTML deberías etiquetar especialmente los siguientes elementos con una etiqueta `label`:

- **Campos de entrada**: `<input type="text" />`, `<input type="password" />`, `<textarea>`
- **Casillas de verificación**: `<input type="checkbox" />`
- **Botones de opción**: `<input type="radio" />`
- **Listas desplegables**: `<select>`
- **Campos para subidas**: `<input type="file" />`

## ¿Qué atributos admite la etiqueta `label`?

La etiqueta HTML `label` admite todos los [atributos HTML](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/atributos-html/) globales, así como todos los atributos de evento. Además, pueden utilizarse los siguientes atributos específicos con la etiqueta HTML:

- `for`: Con el atributo `for` se indica el ID del elemento del formulario con el que se debe vincular la etiqueta. El valor de `for` debe coincidir exactamente con el valor del atributo `id` de otro control de formulario del mismo documento.
- `form`: El atributo `form` es un atributo adicional que puede resultar útil en diseños complejos. En formularios accesibles habituales, con una etiqueta HTML label y su campo de entrada asociado, no es necesario. La vinculación debería realizarse mediante `for` / `id` o mediante anidamiento. Además, oficialmente `form` no forma parte de los atributos definidos por defecto para `label` en la especificación HTML.

```html
<form id="participante">
    <label for="nombre">Nombre</label>
    <input name="nombre" id="nombre" maxlength="25">
    <label for="apellidos">Apellidos</label>
    <input name="apellidos" id="apellidos" maxlength="30">
    <button>Confirmar datos</button>
</form>
```


This is a markdown version of: [https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/html-label/](https://www.ionos.com/es-us/digitalguide/paginas-web/desarrollo-web/html-label/) for AI/LLM consumption.