DEV Community

Cover image for A11y tips: placeholder can't replace label
Carlos Espada
Carlos Espada

Posted on

A11y tips: placeholder can't replace label

What do the specifications say about the placeholder?

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

For example:

<label for="email-address">Email</label>
<input
  type="email"
  id="email-address"
  name="email-address"
  placeholder="john.doe@example.com"
/>
Enter fullscreen mode Exit fullscreen mode

The function of the placeholder attribute is very different from that of <label>: a label is a title of the form control and it must always be present, the placeholder is just a help hint in certain fields and it may or may not exist. Different elements to fulfill different functions.

So when you are doing the HTML of the forms, remember that: there is no case where placeholder can replace label.

Discussion (1)

Collapse
ingosteinke profile image
Ingo Steinke

In the common case when graphic designers want no visible label, use the common class .visually-hidden on the label and add the necessary styles as recommended by a11yproject.