Form labels

Form labels describe the information required for each field and should be programmatically associated with the corresponding input to support assistive technologies.

Labeling Techniques

Technique #1: Use the <label> element

Use the <label> element to associate the on-screen text with the actual form field for different form input types using the for and id attributes.

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="fname">

<label for="subscribe">
<input type="checkbox" id="subscribe" name="subscribe">
Subscribe to newsletter
</label>

Technique #2: Use aria-label

The aria-label attribute is used when no visible label is present or the visual label is insufficient.

<input type="text" name="search" aria-label="Search">

Technique #3: Use aria-labelledby

The aria-labelledby attribute is similar to aria-label, but uses an existing element’s text as the accessible name via an id reference.

<div id="first_name">First Name:</div>
<input type="text" aria-labelledby="first_name" name="fname">

Label Positioning

Labels should be persistent and not rely on placeholder text, which disappears as users type and may truncate longer instructions. Place labels above or to the left of fields; right- or below-aligned labels can be harder to track, especially at high zoom.

A label to the right or below can cause confusion if you are highly zoomed into the screen.

The best solution is to place the label above the form field or on the left.