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.

Top comments (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.

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!