Label a form

• Overview
• Group related fields
• Label required fields

---

Overview

A well-designed form should be easy for everyone to complete. Once you have planned your form by choosing what data you need to collect and crafting clear questions, and designed your form with form fields that match the type of data you are collecting, you need to connect the questions to the form fields as form labels.

To be accessible, the labels should be visible and include proper markup to connect the label to the form field. When done correctly, the field can be announced by the label when using assistive technology, and the clickable area is increased to include the label. Do not use placeholder text to label your form fields.

A good form label is clear and descriptive, identifying the purpose of the field and any required formatting.

An explicit label, an HTML <label> with a for attribute referencing the id attribute of the input, is the most robust method of labeling a form element. Explicit labels are more robustly supported by more assistive technology than implicit labels where the <label> is wrapped around the input.

<label for="flavor">Favorite ice cream flavor</label>
<input type="text" id="flavor" name="fave_flavor">

An alternative method using Accessible Rich Internet Applications or Use ARIA labels correctly for accessibility is generally well supported, but must be implemented correctly. Browser and screen reader support of ARIA varies, particularly for mobile platforms. Because of this, use the native HTML whenever possible.

For more about using ARIA attributes, see:

• ARIA labels and relationships: A post from Google Developers briefly explaining aria-label, aria-labelledby, and aria-describedby, plus a few other ARIA attributes
• aria-label: Mozilla Developers Network (MDN) documentation on using aria-label to directly label a form field
• aria-labelledby: MDN documentation on using aria-labelledby to reference one or more other elements to label a form field
• aria-describedby: MDN documentation on using aria-describedby to connect additional information, such as a required format, as a description
• Accessible Form Labeling & Instructions: Tips for labeling form elements, including accessible error messaging and required fields

Group related fields

Group related form fields under a common label that identifies the group. Radio buttons or checkboxes that answer a single question must be grouped, but other related form fields can also be grouped. Grouping fields makes a form more accessible and easier to complete by clearly indicating the relationship of the fields.

Group form fields using <fieldset> and <legend> or by using ARIA roles and labels.

For a group of radio buttons or checkboxes, the legend or description should be the question:

<fieldset>
    <legend>Do you prefer chocolate or strawberry ice cream?</legend>
    <input type="radio" id="chocolate" name="flavor" value="chocolate">
    <label for="chocolate">Chocolate</label>
    <input type="radio" id="strawberry" name="flavor" value="strawberry">
    <label for="strawberry">Strawberry</label>
</fieldset>

For a group such as a street address, city, state, and ZIP code, the legend or description should describe the group (Local address, perhaps):

<fieldset>
    <legend>Local address</legend>
    <label for="street">Street</label>
    <input type="text" id="street" name="local_street">
    <label for="city">City</label>
    <input type="text" id="city" name="local_city">
    <label for="state">State</label>
    <input type="text" id="state" name="local_state">
    <label for="zip">ZIP code</label>
    <input type="text" id="zip" name="local_zip">
</fieldset>

For more about grouping form fields, see:

• Grouping Controls: Web Accessibility Initiative (WAI) tutorial showing how to group form fields using both HTML and ARIA
• Using the fieldset and legend elements: Post from the Gov.uk blog that explains how grouping controls helps people who use assistive technology understand the form

Label required fields

Clearly indicate required fields visually and with proper markup and appropriate attributes. This helps everyone complete the form.

Visually indicate required fields by adding "(required)" or an asterisk (*) to the label. If an asterisk is used, it must be defined at the start of the form (for example, * indicates a required field).

<label for="name">Name (required)</label>
<input type="text" id="name" name="name">

Use HTML required or Accessible Rich Internet Application (ARIA) aria-required attributes to indicate required fields through markup. Follow the best practices described in Required attribute requirements when using these attributes.

<label for="name">Name *</label>
<input type="text" id="name" name="name" required aria-invalid="false">

Learn about best practices for when and when not to use the aria-required attribute, including four example cases, in Aria-required=true: WCAG 2 Compliance versus Best Practice.