DEV Community

Patch
Patch

Posted on

Your email field loses its label when you type. Here is the HTML fix.

#a11y #webdev #html

Written with AI assistance. The example was tested in Chromium as described below.

Your form says "Email address" until someone starts typing. Then the words disappear. If those words are a placeholder, add a visible label rather than trying to keep the placeholder on screen.

This is the starting point:

<input type="email" placeholder="Email address">
Enter fullscreen mode Exit fullscreen mode

A placeholder can show an example. It should not be the only visible instruction. Some browser and assistive technology combinations may use it as a fallback name, but that does not make it a persistent label.

Here is the replacement:

<label for="email">Email address</label>
<input
  id="email"
  name="email"
  type="email"
  autocomplete="email"
  placeholder="you@example.com"
  aria-describedby="email-help"
>
<p id="email-help">We will send your receipt here.</p>
Enter fullscreen mode Exit fullscreen mode

The label's for matches the input's id. That connects the two. Clicking the label focuses the field. The visible label stays after you type.

The name is the key used when a form submits the value. It does not create a visible label. The autocomplete value tells the browser what kind of saved information belongs here. The help paragraph is connected by aria-describedby; it is extra context, not the field's name.

You can remove the placeholder entirely. The label still works. If you repeat this field on the same page, give each input a unique id and update its label's for and any description references.

Check the change

I loaded that replacement in Chromium and checked three things:

  1. Clicking "Email address" made the input the active element.
  2. The input's labels.length was 1.
  3. A role query found the textbox by the exact accessible name "Email address". It still did after entering a sample address.

You can repeat the first check by clicking the label and typing. The text should go into its field. Then tab through your real form and confirm that you can see where focus is.

This test does not certify a form as accessible. It does not test a screen reader, error messages, contrast, server validation or submission. Those need separate checks. This change fixes one specific problem: the field no longer loses its visible label when someone types.

Top comments (0)