Search code examples
htmllabelaccessibilityscreen-readers

Using placeholder instead of label

When it comes to accessibility, it's a common practice to not use placeholders as substitute for labels because upon entering something into the field, the placeholder disappears. But what if my placeholder acts as a visual label afterwards?

Before focus and entry

After focus and entry

Is it still okay to only use a placeholder in this case in place of an actual Label? If so, do I also need to tag it with an aria-label as well?

Solution

  • I would not recommend using a placeholder attribute or other container in place of a <label> element.

    This is not an issue of having a "visual label", as you described. The <label> element is associated with the <input> element programmatically at the data-level.

    <label for="middle-initial">Middle Initial</label>
<input id="middle-initial">

    The placeholder attribute is essentially invisible to screen readers, so it can be used in conjunction with <label>, however it should not be used as a substitute for a <label>.

    If you really don't like the visual appearance of having the <label> on your page, you can position the text off screen using CSS, or if you're currently using bootstrap, you can use the .sr-only class.