Form Labels
Definition
All form inputs and controls need to have a label that is understandable by all users whether they can see the page or not.
Proper use of labels will benefit:
- Screen reader users (will read out loud the label, when the user is focused on the element)
-
Users who have difficulty clicking on very small regions (such as
checkboxes). When a user clicks the text within the
<label>element it moves focus to the form element, increasing the "hit area".
Description
The <label> tag defines a label for several elements:
<input type="checkbox"><input type="color"><<input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="search"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week"><meter><progress><select><textarea>
Accessibility Considerations
Meaningful Label Text
To assist users in successfully completing a form, provide labels that are clear, informative, accurate, and meaningful. Users should know up front exactly what is needed in order to submit the form successfully.
Relying on Sensory Characteristics
Labels MUST NOT rely solely on references to sensory characteristics. Relying on sensory characteristics to provide labels for form controls has the potential to exclude users from understanding the labels. For instance, assuming everyone can see the shape, color, or iconography of a control may exclude users who are blind, colorblind, or have low vision. Some things to keep in mind:
- If color is used in a form control label, ensure that there is a non-color distinguishing factor such as text or an easily-recognizable symbol or icon.
- The color contrast of text and symbols or icons used as label must meet minimum color contrast ratio requirements.
- All information conveyed visually by a form label must be provided programmatically for assistive technology users.
Don't use placeholders as form labels
While placeholder text provides valuable guidance for many users, placeholder text is not a replacement for labels. Assistive technologies, such as screen readers, do not treat placeholder text as labels.
Placeholder text should always disappear from form fields when users start entering text.
If the placeholder text contains instructional information or examples that disappear, it makes it more difficult for users to check their responses before submitting the form. If the hints or instructions are very important consider providing it as an explicit form instruction and make sure its semantically correct. You can reference the form instruction section for guidance.
Implicit Labels
Use of implicit labels is discouraged.
Strict use of explicit labels promotes consistency across the design system. Styles for the Mosaic design system do not support implicit label semantics. Use explicit labels to ensure form elements are true to our designs.
Support for implicit labels is solid, but there have been rare edge cases where certain screen readers do not read the implicit label.
Examples
Explicit Label
These form inputs have labels explicitly associated with them. Explicit labels make the association unambiguous for assistive technologies. This is the recommended method for most circumstances.
<div class="mb-3">
<label for="fname_a" class="form-label">First Name</label>
<input type="text" name="fname_a" id="fname_a" class="form-control" />
</div>
<div class="mb-3">
<label for="lname_a" class="form-label">Last Name</label>
<input type="text" name="lname_a" id="lname_a" class="form-control" />
</div>Don't do thisImplicit Label
Notice the form-control class is not able to expand the full width
of the container because it's surrounded by the <label>
element.
<div class="mb-3">
<label>First Name: <input type="text" name="fname1" /></label>
</div>
<div class="mb-3">
<label>Last Name: <input type="text" name="lname1" /></label>
</div>aria-label for text input
This example shows a search input field that uses aria-label to provide a label for screen readers, since there is no visible label. The search field is visibly labelled by the search button next to it. This is one of the few circumstances in which it is permissible to not have a visible label for a form field.
<div class="input-group mb-3">
<input type="text" placeholder="Search by ID, PI name, etc" class="form-control border-primary" aria-label="Enter keywords and click submit to search ICPSR for data" aria-describedby="button-addon2">
<button type="submit" class="btn btn-primary" id="button-addon2"><i class="fas fa-search"></i><span class="visually-hidden">Search</span></button>
</div>Group Labels
There are times when a group of related form fields require not only their individual labels but also a group label in order to provide all of the necessary context for the fields. A typical example is a group of radio buttons or checkboxes, each with its own label, that is also grouped together under a group label or question.
The same concept can be applied to other groups of form fields such as a grouping of mailing address and billing address fields.
Group labels MUST be programmatically associated with the group if the individual labels for each element in the group are insufficient on their own.
Group Related Form Elements with <fieldset> and <legend>
The <fieldset> tag groups form elements programmatically
by applying the <legend> as the label for the group.
Screen readers can read the label when users arrive at the group.
<form>
<fieldset>
<legend>Contact Information</legend>
<div class="mb-3">
<label class="form-label" for="name6044">Name</label>
<input class="form-control" id="name6044" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="phone6044">Phone</label>
<input class="form-control" id="phone6044" type="text" />
</div>
</fieldset>
</form>Nesting Fieldset
Nesting<fieldset> Multiple fields with only one visible label: Use
aria-label
In some cases you may want to create labelled subgroups. It is
semantically acceptable to nest <fieldset> elements.
<form>
<fieldset>
<legend>Contact Information</legend>
<div class="mb-3">
<label class="form-label" for="firstName">First Name</label>
<input class="form-control" id="firstName" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="lastName">Last Name</label>
<input class="form-control" id="lastName" type="text" />
</div>
<div class="mb-3">
<label class="form-label" for="phone1">Phone</label>
<div class="row">
<div class="col-3 col-xl-2">
<label class="mb-1" for="phone1">Area Code</label>
<input
class="form-control"
id="phone1"
type="text"
aria-label="Phone Number area code"
size="3"
maxlength="3" />
</div>
<div class="col-3 col-xl-2">
<label class="mb-1" for="phone2">First 3 digits</label>
<input
class="form-control"
id="phone2"
type="text"
aria-label="second three digits"
size="3"
maxlength="3" />
</div>
<div class="col-4 col-xl-2">
<label class="mb-1" for="phone3">Last 4 digits</label>
<input
class="form-control"
id="phone3"
type="text"
aria-label="last four digits"
size="4"
maxlength="4" />
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="email6045">Email</label
><input class="form-control" id="email6045" type="text" />
</div>
<fieldset>
<legend>Preferred mode of communication</legend>
<div class="form-check">
<input
class="form-check-input"
id="mode-phone6045"
name="mode"
type="radio" />
<label class="form-check-label" for="mode-phone6045">Phone</label>
</div>
<div class="form-check">
<input
class="form-check-input"
id="mode-email6045"
name="mode"
type="radio" />
<label class="form-check-label" for="mode-email6045">Email</label>
</div>
</fieldset>
</fieldset>
</form>