Etiqueta HTML label: la solución óptima para conseguir una mayor accesibilidad y usabilidad

Con la etiqueta HTML label puedes mejorar la usabilidad de tu página web y conseguir un acceso sin restricciones. label se puede utilizar, entre otras cosas, para campos de entrada, casillas de verificación y botones, y funciona con atributos globales y de evento, así como con for y form.

Hosting
El hosting como nunca lo habías visto
  • Rápido, seguro, flexible y escalable
  • Certificado SSL/DDoS incluido
  • Dominio y asesor personal incluidos

¿Para qué se utiliza HTML label?

La etiqueta HTML label es especialmente importante para conseguir una mayor claridad y accesibilidad web. Se utiliza en los formularios y añade una leyenda o etiqueta explicativa a elementos como, por ejemplo, campos de entrada, botones o casillas de verificación.

Esto es muy importante para dos casos de uso en particular. En primer lugar, facilita la navegación por una página web a los visitantes que tienen problemas con pequeñas áreas: siendo más fácil pulsar sobre ella, dado que se amplía la zona en la que se puede hacer clic. Para los usuarios que utilizan un lector de pantalla, la etiqueta HTML label también garantiza que el pie de foto pueda ser leído en voz alta. Esto mejora la usabilidad para todos los visitantes de tu página web.

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

Hay dos maneras de utilizar la etiqueta label en HTML. El atributo for te permite vincular la etiqueta directamente al campo de entrada. También puedes incluir el formulario directamente dentro de la propia etiqueta HTML label. Para explicarlo de mejor manera, a continuación, se muestran las dos opciones de la etiqueta label en HTML.

Para las casillas de verificación:

<p>
<input type="checkbox" name="read" id="read" value="yes" />
<label for="read">I have read the conditions</label>
</p>

Es importante que el atributo for utilizado en la etiqueta HTML label tenga el mismo valor que el atributo id del campo de entrada.

Para los botones:

<input type="radio" id="radio" value="agree" />
<label for="read">Agree</label>

Con la segunda opción, se incluye el pie de foto. Por ejemplo, se puede ver así:

<p>
<label>
<input type="checkbox" name="read" value="yes" />
I have read the conditions
</label>
</p>

¿Qué elementos se asocian a una etiqueta HTML label?

Por ejemplo, para que los usuarios con lectores de pantalla puedan acceder a tu página con facilidad, los siguientes elementos de HTML deben estar asociados a una etiqueta label:

  • Campos de entrada: <input type="text" />, <input type="password" />, <testarea>
  • Casillas de verificación: <input type="checkbox" />
  • Botones: <input type="radio" />
  • Listas de selección: <select>
  • Campos para subir archivos: <input type="file" />

¿Qué atributos admite la etiqueta label?

La etiqueta HTML label admite todos los atributos HTML globales, así como los atributos de evento. Para ello, se pueden vincular los siguientes atributos a la etiqueta HTML:

for: el atributo for se utiliza para determinar el ID del elemento de entrada al que se debe asociar el título. Esto también significa que, en un documento, el primer elemento de entrada que corresponde a este valor se asocia automáticamente con el título.

form: el atributo form define qué elemento del formulario debe asignarse a la etiqueta HTML label. Por ejemplo, en la práctica, esto se ve así:

<form id="participant">
<label class="h2" form="participant">Name</label>
<label for="firstname">firstname</label>
<input name="firstname" id="firstname" maxlength="25">
<label for="surname">surname</label>
<input name="surname" id="surname" maxlength="30">
<button>Verify information</button>
</form>
Consejo

Diseña tu web de acuerdo con tus deseos personales. Con el editor de páginas web de IONOS puedes crear tu presencia profesional en Internet sin necesidad de tener muchos conocimientos previos. Como alternativa, también puedes recurrir a la experiencia de nuestros desarrolladores. Solo tienes que elegir la solución que mejor se adapte a tus necesidades.

¿Le ha resultado útil este artículo?