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

#a11y #tips #html

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.

Top comments (1)

Collapse
 
ingosteinke profile image
Ingo Steinke, web developer •

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.