Missing and placeholder labels

Priority: 1

Introduction

All form elements need labels associated to them. Where a label is not associated, the screen reader user is not informed of the field’s purpose upon focusing that field. Screen reader users typically traverse forms by focus, not ‘virtual cursor’ (element by element).

The placeholder attribute is intended for providing supplemental hints and examples for completing a form. It should be used in conjunction with a standard and persistent label, conventionally placed above the input in question.

Where placeholders are used as primary labels, a number of accessibility and usability issues emerge.

Firstly, the placeholder is not supported as an accessible label in legacy browsers and assistive technologies, meaning those users will not hear a label as they focus the control.

For sighted users, there are cognitive challenges with the intermittent nature of the placeholder label, resulting in some getting confused and frustrated as they try to remember what it was they were supposed to be entering. Others mistake the placeholder text as content and think the field is already complete.

WCAG criteria

3.3.2 Labels or Instructions (level A)

Scope of the issue

Marketing site & Join site

Placeholders-as-labels are found wherever there is a “Get A Quote” / “Get My Quote” form.

In addition, the Join site’s “My Information” form has no visible and persistent labels:

The My Information form

In the Join site’s Payment details page, persistent visual labels accompany placeholders. The issue here is that the <label>s are actually <div>s and are not associated accessibly with the form inputs.

Payment details form

Account dashboard

The Submit an electricity meter reading page’s inputs (pictured) each have a missing label and no placeholder as a substitute.

Fixing the issue

Placeholder labels

In some cases, such as search fields where the label of the submit button, “search”, acts as a visible label, a persistent visual label is not really necessary and an invisible textual label need only be provided for assistive technology users. However, on the Bulb sites the “Get a quote” (or “Get my quote”) label for the submit button does not match the “Your post code” placeholder label.

A label that is both visually persistent and forms the accessible label for the field is therefore recommended.


<label for="postcode">Your postcode</label>
<input id="postcode" name="postcode" placeholder="E.g. NR9 5NF">
<button type="submit">Get my quote</button>

The <label> element should be associated with the…
…<input> by matching the values of the respective for and id attributes.
The placeholder is now optional, but should be clearly marked as an example/hint to be replaced, such as by prefixing with “E.g.” if included.

Payment details page

For the Payment details page, ensure a proper <label> element is used, and is associated to the <input> using for and id as in the above code example.

Input sets on the My information and Payment details pages

The “Date of birth” and “Sort code” fields are related and must have a group label. Using the “Date of birth” set (pictured) as an example, follow the code example provided.

Date of birth inputs


<fieldset>
  <legend>Date of birth</legend>
  <label for="day" class="visually-hidden">Day in D D format</label>
  <input id="day" name="day" placeholder="DD">
  <label for="month" class="visually-hidden">Month in M M format</label>
  <input id="month" name="month" placeholder="MM">
  <label for="year" class="visually-hidden">Month in Y Y format</label>
  <input id="year" name="year" placeholder="YY">
</fieldset>

The <legend> forms the group label (this only works if all the elements are within a <fieldset>, as shown).
The label is hidden visually but available to screen reader users (see the definition of .visually-hidden in the next section).
Since the label is hidden, we can provide more helpful information to screen reader users. For the payment page “Sort code” example, you should use “First two digits” and so on.
The placeholder can remain as-is.

Submit an electricity meter reading

In this case, both a group label and individual labels are missing.

For the Submit an electricity meter reading, include invisible but accessible labels in the form “First number”, “Second number” etc for each input/number. In addition, put the <h4> (which ought to be an <h2> — see Heading structure) and description inside a <legend> and group all the controls inside a <fieldset> as in the following code example:


<fieldset>
  <legend>
    <h2>New electricity reading</h2>
    <p>Enter all the numbers you see on your meter</p>
  </legend>
  <!-- each loop -->
  <label for="number-1" class="visually-hidden">First number</label>
  <input type="number" id="number-1" class="sc-RefOD cAjWea" name="number-1" value="0" required="">
  <!-- end each loop -->
</fieldset>

A special class must be used to hide the label visually, but not from assistive technologies (screen readers). The class is defined below.


.visually-hidden {
  position: absolute;
  white-space: nowrap;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
}