Skip to main content

Visible Labels

Form labels should be visible and persistent. If a label disappears after the user interacts with an input, users may forget the field’s purpose. This impacts all users, not only those with disabilities. For example, the following form uses the placeholder attribute as a label:

<input aria-label="Home Phone" placeholder="Home Phone" value="(415) 555-1234">
<input aria-label="Cell Phone" placeholder="Cell Phone" value="(415) 555-9876">

When you look at the form in the filled out state, its difficult to know which element is the home phone and which is the cell phone fields. Compare with having visible labels:



<label for="hp">Home Phone</label><input id="hp" value="(415) 555-1234"> 
<label for="cp">Cell Phone</label><input id="cp" value="(415) 555-9876">

Related Form Fields

When information is split across multiple fields (e.g., a phone number), provide a visible group label and use aria-label for each individual field. For example:

Home Phone

( ) - 

<fieldset>
  <legend>Phone Number</legend> 
  ( <input aria-label="Area Code" size="3"> ) 
  <input aria-label="Prefix" size="3"> - 
  <input aria-label="Number" size="4">
</fieldset>

This is acceptable because the legend provides the overall label, but then the visible placement of the individual fields provides enough information.

Additional Information

Last modified