Additional instructions are only provided for the control to people who do not have disabilities. For a person with disabilities, the instructions are incomplete, inaccurate, or misleading.

Link to Additional instructions are only provided for the control to people who do not have disabilities. For a person with disabilities, the instructions are incomplete, inaccurate, or misleading. copied to clipboard

Rule ID:: instructions-not-accurate
User Impact:: Serious
WCAG :: 3.3.2.b

Rule

Instructions for an element MUST be available as programmatically-discernible text. Instructions for an element 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:

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

To fix this issue, make sure that your instructions are accurate, complete, and not misleading.

Code Examples

Good Example:

Instructions adjacent and programmatically associated:

<p>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email" aria-describedby="input-instructions">
  <span id="input-instructions">(Must be a valid email address)</span>
</p>

Instructions inside

<fieldset>
  <legend>Login Information (Required)</legend>
  <p>
    <label for="username">Username:</label>
    <input type="text" id="username">
  </p>
  <p>
    <label for="password">Password:</label>
    <input type="password" id="password">
  </p>
</fieldset>

Failure Example:

Instructions adjacent, but not programmatically associated:

<p>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email">
  <span>(Must be a valid email address)</span>
</p>

How To Fix

Common solutions to fix this issue include:

Provide essential instructions as text that is part of the field <label> or field <legend>.
Provide essential instructions as plain text before the form, if it applies to multiple fields.
Provide essential instructions as text at the top of the form if it applies to multiple fields, and associate it with the intended field using aria-describedby.
Provide essential instructions as text adjacent to the intended field, and associate it with that field using aria-describedby.
Provide essential instructions when the field gains mouse hover and keyboard focus via an accessible tooltip.
Provide essential instructions as part of an accessible error message after the field input is validated.

Don't do this:

Hide instructions so that they are only useful for screen reader users.
Put instructions only in an aria-label, so that they are only useful for screen reader users.
Put instructions far away from the intended field(s), or away from the form.
Rely on visual characteristics such as color or position to convey relationships.