Additional instructions to successfully use the component are needed but not provided for people with disabilities. People without disabilities have access to additional instructions.

Link to Additional instructions to successfully use the component are needed but not provided for people with disabilities. People without disabilities have access to additional instructions. copied to clipboard

Rule ID:: instructions-not-included
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, provide good instructions for your form according to the solutions below.

Code Examples

Good Examples:

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>
  <label for="username">Username: </label>
  <input type="text" id="username"></p>
  <label for="password">Password: </label>
  <input type="password" id="password"></p>
</fieldset>

Failure Example:

Instructions only provided to screen readers:

<p>
  <label for="new-pwd">New password:</label>
  <input type="password" id="new-pwd" aria-label="New password, must contain at least 8 characters including both letters and numerals">
</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.

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.