No visual label is present and the purpose of this field is not clear without a visual label.

Link to No visual label is present and the purpose of this field is not clear without a visual label. copied to clipboard
Rule ID:
label-not-present
User Impact:
Serious
WCAG:
3.3.2.a

Rule

Labels MUST be visible.

Background

Filling out forms correctly can be one of the more time consuming and frustrating online user experiences, and it can be even more challenging for people with disabilities. Well-designed labels and instructions provide enough information so people can fill out forms without undue confusion or errors. The single easiest way to prevent user errors is by providing clear and accurate labels and instructions that are available to everyone at all times. Labels and instructions should:

  1. be clear, accurate, and informative
  2. disclose any constraints such as required data formats or ranges, and
  3. correctly identify required fields.
  4. be visible and programmatically-associated.

To fix this issue, provide a visible label for the form field, and ensure that they are programmatically associated.

Code Examples

Good Examples:

Input has label through <label> tag:

<p>
  <label for="fname">First Name:</label>
  <input type="text" id="fname">
</p>
<p>
  <label for="lname">Last Name:</label>
  <input type="text" id="lname">
</p>

Input has label through aria-labelledby:

<p id="fname-label">First Name:</p>
<input type="text" id="fname" aria-labelledby="fname-label">

<p id="lname-label">Last Name:</p> <input type="text" id="lname" aria-labelledby="lname-label">

Failure Examples:

Individual fields have no label:

<p>Enter Name:</p>
<input type="text" id="fname">
<input type="text" id="lname">

<p>Enter address:</p> <input type="text" id="street"><br> <input type="text" id="city"><br> <input type="text" id="state"> <input type="text" id="zcode">

<h4>Labels are available to screen readers, but are invisible to sighted users:</h4>
<pre><code>&lt;p id="fname-label" class="visually-hidden"&gt;First Name:&lt;/p&gt;
&lt;input type="text" id="fname" aria-labelledby="fname-label"&gt;
&lt;p id="lname-label" class="visually-hidden"&gt;Last Name:&lt;/p&gt;
&lt;input type="text" id="lname" aria-labelledby="lname-label"&gt;</code></pre>

How To Fix

To fix this issue, do one of the following:

  • Use the <label> element to provide a visible label for the form field.
  • Use the aria-labelledby property to associate a label with the form field.

Don't do this:

  • Rely on the page layout to associate the label with the form field.

References