How do you use the HTML label tag to improve your website?

With the HTML label tag, you improve your website’s usability and ac­ces­si­bil­i­ty. label can be used for input fields, check­box­es, and radio buttons, among other things. It works with global at­trib­ut­es, event at­trib­ut­es, as well as for and form.

What is the HTML label tag used for?

For improved clarity and website ac­ces­si­bil­i­ty, the HTML label tag plays a key role. It is used in forms to provide clear de­scrip­tions for elements such as input fields, radio buttons, and check­box­es.

This is es­pe­cial­ly important for two use cases:

• It makes website nav­i­ga­tion easier for visitors who have dif­fi­cul­ty in­ter­act­ing with small clickable areas. Because the clickable area is larger, form elements are easier to select and use.
• For users who rely on a screen reader, the HTML label tag ensures that form labels are read aloud correctly. This improves usability for all visitors to your website.

WCAG relevance of the label tag

HTML forms should not only be visually easy to un­der­stand, but also comply with the current standards for digital ac­ces­si­bil­i­ty. The WCAG (Web Content Ac­ces­si­bil­i­ty Guide­lines) 2.2 require, for example, that all input fields be labeled or provided with clear in­struc­tions (Success Criterion 3.3.2 “Labels or In­struc­tions”). This ensures that people with cognitive or visual im­pair­ments un­der­stand what input is expected.

In addition, WCAG Success Criterion 2.5.3 “Label in Name” ensures that the visible label is also included in the program code as an ac­ces­si­ble name. This is important for users who rely on assistive tech­nolo­gies or voice control.

How is the label tag in HTML used?

The label tag in HTML can be used in two different ways. Both methods ensure that assistive tech­nolo­gies such as screen readers correctly associate the label with its form control and allow users to click the label to focus the cor­re­spond­ing input field.

Explicit as­so­ci­a­tion (with for and id)

With the explicit method, you separate the label and the form field in the HTML, but link them using the for attribute with the input field’s id value. This option provides the best support from browsers and assistive tech­nolo­gies. For this reason, it is generally rec­om­mend­ed as a best practice.

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

It’s important that the value of the for attribute matches the id attribute of the input field exactly.

Implicit as­so­ci­a­tion (input inside the label)

Al­ter­na­tive­ly, you can place the input field inside the <label> element. In this case, the as­so­ci­a­tion is created au­to­mat­i­cal­ly without needing to set for and id. This option is also valid HTML, but it is not supported by all devices.

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

Which elements are as­so­ci­at­ed with the HTML tag for label?

To enable ac­ces­si­ble access to your page for users with screen readers, for example, you should label the following elements in HTML with an HTML label (the label tag in HTML) in par­tic­u­lar:

• Input fields: <input type="text" />, <input type="password" />, <textarea>
• Check­box­es: <input type="checkbox" />
• Radio buttons: <input type="radio" />
• Drop-down lists: <select>
• Upload fields: <input type="file" />

Which at­trib­ut­es does the label tag in HTML support?

The HTML label supports all global HTML at­trib­ut­es as well as all event at­trib­ut­es. In addition, the following at­trib­ut­es can be as­so­ci­at­ed with the HTML label:

• for: The for attribute specifies the ID of the input element that the label should be as­so­ci­at­ed with. The value of for must exactly match the value of the id attribute of another form control in the same document.
• form: The form attribute can be useful in complex layouts where a label and its as­so­ci­at­ed form control are not located within the same form element. In most ac­ces­si­ble forms, however, it is not required. The rec­om­mend­ed as­so­ci­a­tion is done using for / id or by nesting the input inside the label. The form attribute is not part of the standard at­trib­ut­es typically used with the HTML label tag in the HTML spec­i­fi­ca­tion.

<form id="participant">
    <label for="first-name">First name</label>
    <input name="first-name" id="first-name" maxlength="25">
    <label for="last-name">Last name</label>
    <input name="last-name" id="last-name" maxlength="30">
    <button>Confirm details</button>
</form>