Guidance on Designing & Implementing Form Labels

Placeholder Values Are Not An Appropriate Alternative For Labels (Avoid)

While using placeholders as labels may seem like a great way to reduce visual clutter, placeholders and labels are very different things. Please familiarize with the numerous pitfalls of using placeholder text to stand-in for proper labels.

Assistive Technology

"Keyword edit blank"

Placeholder Values May Not Duplicate What is Already Found In a Label (Avoid)

Do not duplicate the label as placeholder text. Not only is this visually redundant, but assistive technology users may have to listen to it twice, too. Alternatives measures to fill in the empty space with similar text, because empty space may not be aesthetically pleasing, will be equally frowned upon (Enter your first name, Ex. John, etc.).

Assistive Technology

"First Name edit First Name blank"

Placeholders May Not Be Used With Hidden Labels (Avoid)

Using a placeholder value and hiding the label does not solve the problems we seek to avoid. While hiding labels may seem like a terrific way to address accessibility, it is often prone to issue. For example, we may be hiding a label that includes redundant placeholder text. All we have done is mask the issue, visually. Include labels or use the floating label pattern instead.

Code

<label class="sr-only" for="example-3-keyword">Keyword</label>
<input id="example-3-keyword" placeholder="Keyword">

Assistive Technology

"Keyword edit Keyword blank"

Placeholder Values May Only Be Used To Provide Supplemental or Suggestive Information

Placeholder text should be used to provide supplemental information. For example, formatting or suggestive hints are an ideal use of placeholder text.

Assistive Technology

"Phone Number edit Example: 123-456-7890 blank"

Critical Information About a Form Field Must Always Be Placed Outside of the Field

Placeholder text does have its limitations. If a field is pre-populated with data or a user begins typing, the placeholder text will vanish. A problem for people who have cognitive disabilities, to name but one group it may affect. If formatted or supplemental information is critical, then instructions should be placed outside of a field, where it will always be present.

Required format: 123-456-7890

Code

To convey this information to assistive technology users, use aria-describedby, which will append the message to the input field.

<label for="example-4-phone-number">Phone Number</label>
<input aria-describedby="phone-formatting" id="example-4-phone-number">
<p id="phone-formatting"><em>Required format: 123-456-7890</em></p>

Assistive Technology

"Phone Number edit Required format: 123-456-7890 blank"

Placeholder Values Must Always Be Contrast Friendly

Default placeholder text, often a lighter shade of gray, can be hard to read in some browsers, so always aim for a color of #767676 on white backgrounds.

Grouping Inputs Without Visible Form Labels (Exception)

In certain circumstance, traditional labels can be omitted, but should be grouped together via a fieldset. For example, three separate fields for a single date entry. In addition to the fieldset, we would include a legend as our primary label, along with aria-label to distinguish each field.

Note: This is not a technique we would use on a single search form, but to better organize groups of fields, within a complex form.

Code

<fieldset>
  <legend>Select Date (Month, Day, Year)</legend>
  <input aria-label="Month" placeholder="MM">
  <input aria-label="Day" placeholder="DD">
  <input aria-label="Year" placeholder="YY">
</fieldset>

Assistive Technology

"Select Date (Month, Day, Year) grouping, Month edit MM blank"