HTML `label`: la solución óptima para una mayor ac­ce­si­bi­li­dad y usa­bi­li­dad

Con la etiqueta label en HTML mejoras la usa­bi­li­dad de tu página web y facilitas un acceso sin barreras. label se utiliza, por ejemplo, para campos de entrada, casillas de ve­ri­fi­ca­ción y botones de opción. Funciona junto con atributos globales y de evento, así como con los atributos es­pe­cí­fi­cos for y form.

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

Para mejorar la claridad y la ac­ce­si­bi­li­dad en una página web, la etiqueta HTML label es es­pe­cia­l­me­n­te im­po­r­ta­n­te. Se utiliza en fo­r­mu­la­rios para asociar textos de­s­cri­p­ti­vos a elementos como campos de entrada, botones de opción o casillas de ve­ri­fi­ca­ción.

Esto resulta es­pe­cia­l­me­n­te relevante en dos casos de uso:

• Por un lado, facilita la na­ve­ga­ción en una página web a personas que tienen di­fi­cu­l­ta­des para in­ter­ac­tuar con zonas de in­ter­ac­ción pequeñas. Al ampliar la su­pe­r­fi­cie sobre la que se puede hacer clic, se si­m­pli­fi­ca la in­ter­ac­ción con los fo­r­mu­la­rios.
• Por otro lado, para los usuarios que utilizan un lector de pantalla, la etiqueta HTML label permite que el contenido de­s­cri­p­ti­vo se lea en voz alta. Esto mejora la usa­bi­li­dad y la co­m­pre­n­sión de los fo­r­mu­la­rios para todas las personas vi­si­ta­n­tes de tu página web.

Re­le­va­n­cia del label para las WCAG

Los fo­r­mu­la­rios HTML no solo deben ser co­m­pre­n­si­bles desde el punto de vista visual, sino también cumplir los es­tá­n­da­res actuales de ac­ce­si­bi­li­dad digital. Las WCAG (Web Content Ac­ce­s­si­bi­li­ty Gui­de­li­nes) 2.2 vigentes es­ta­ble­cen, entre otros re­qui­si­tos, que todos los campos de entrada deben estar co­rre­c­ta­me­n­te eti­que­ta­dos o disponer de in­s­tru­c­cio­nes claras (criterio de co­n­fo­r­mi­dad 3.3.2 “Labels or In­s­tru­c­tio­ns”). De este modo, se garantiza que las personas con di­s­ca­pa­ci­da­des co­g­ni­ti­vas o visuales entiendan qué in­fo­r­ma­ción se espera en cada campo.

Además, el criterio de co­n­fo­r­mi­dad 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 te­c­no­lo­gías de asi­s­te­n­cia o sistemas de control por voz.

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

Existen dos formas de utilizar la etiqueta label en HTML. Ambas ga­ra­n­ti­zan que las te­c­no­lo­gías de asi­s­te­n­cia, como los lectores de pantalla, re­co­no­z­can co­rre­c­ta­me­n­te la etiqueta y que los usuarios puedan acceder di­re­c­ta­me­n­te al campo de entrada co­rre­s­po­n­die­n­te haciendo clic sobre el texto del label.

Vi­n­cu­la­ción explícita (con for e id)

En la vi­n­cu­la­ción explícita, la etiqueta y el campo del fo­r­mu­la­rio 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 co­m­pa­ti­bi­li­dad es­pe­cia­l­me­n­te alta con na­ve­ga­do­res y te­c­no­lo­gías de asi­s­te­n­cia y, por este motivo, se re­co­mie­n­da como buena práctica general.

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

Es fu­n­da­me­n­tal que el valor del atributo for coincida exac­ta­me­n­te con el valor del atributo id.

Vi­n­cu­la­ción implícita (input dentro del label)

Como al­te­r­na­ti­va, puedes colocar el campo de entrada dentro del elemento <label>. En ese caso, la vi­n­cu­la­ción se crea au­to­má­ti­ca­me­n­te, sin necesidad de definir los atributos for e id. Esta variante también es HTML correcto, pero puede presentar li­mi­ta­cio­nes de co­m­pa­ti­bi­li­dad en algunos contextos.

<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 es­pe­cia­l­me­n­te los si­guie­n­tes elementos con una etiqueta label:

• Campos de entrada: <input type="text" />, <input type="password" />, <textarea>
• Casillas de ve­ri­fi­ca­ción: <input type="checkbox" />
• Botones de opción: <input type="radio" />
• Listas de­s­ple­ga­bles: <select>
• Campos para subidas: <input type="file" />

¿Qué atributos admite la etiqueta label?

La etiqueta HTML label admite todos los atributos HTML globales, así como todos los atributos de evento. Además, pueden uti­li­zar­se los si­guie­n­tes atributos es­pe­cí­fi­cos con la etiqueta HTML:

• for: Con el atributo for se indica el ID del elemento del fo­r­mu­la­rio con el que se debe vincular la etiqueta. El valor de for debe coincidir exac­ta­me­n­te con el valor del atributo id de otro control de fo­r­mu­la­rio del mismo documento.
• form: El atributo form es un atributo adicional que puede resultar útil en diseños complejos. En fo­r­mu­la­rios ac­ce­si­bles ha­bi­tua­les, con una etiqueta HTML label y su campo de entrada asociado, no es necesario. La vi­n­cu­la­ción debería rea­li­zar­se mediante for / id o mediante ani­da­mie­n­to. Además, ofi­cia­l­me­n­te form no forma parte de los atributos definidos por defecto para label en la es­pe­ci­fi­ca­ción 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>