Testing form field instructions

Which of the form fields below has both:

1. Persistent, visible instructions?
2. Instructions that are programmatically associated with their form field? (via aria-describedby)

Example 1

• The instructions are not persistent.
• The instructions are not programmatically associated with the form control.

Strongly discouraged. Placeholder text disappears when users begin typing and is not announced as instructions when screen reader users move to the field.

<label for="na">Name</label>
<input id="na" placeholder="Include full name">

Example 2

• The instructions are persistent.
• The instructions are not programmatically associated with the form control.

Not recommended. Sighted users can see the instructions, but screen reader users may not hear them when they move to the form field.

<label for="ph">Phone</label>
<span>Include your area code</span>
<input id="ph" type="tel">

Example 3

• The instructions are persistent.
• The instructions are programmatically associated with the form control.

Recommended. Sighted users can always see the instructions, and screen reader users hear them announced when the form field receives focus.

<label for="ccc">Email</label>
<span id="ccc-h">Add your full and valid email address</span>
<input id="ccc" type="email" aria-describedby="ccc-h">

Testing home