Testing form labels

Which of the form fields below has both:

1. A persistent, visible text label?
2. An accessible name?

Example 1

This example has no visible label and no accessible name.

Strongly discouraged. Sighted users cannot see the label. Screen reader users cannot hear any label.

<input>

Example 2

This example has no visible label, but an accessible name via aria-label.

Strongly discouraged. Screen reader users can hear the label, but sighted users cannot see it.

<input aria-label="Add your address">

Example 3

This example has no visible label, but an accessible name via placeholder.

Strongly discouraged. Placeholder text disappears when users begin typing and is not a substitute for a persistent label.

<input placeholder="Date of birth">

Example 4

This example has no visible label, but an accessible name via title.

Strongly discouraged. The label is only available on hover and may not be available to keyboard, touch or screen reader users.

<input title="Mother's maiden name">

Example 5

This example has a visible label, but no accessible name.

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

<label>Email address</label>
<input type="email">

Example 6

This example has a visible label, and an accessible name via implicit association. The label is wrapped around the form field.

Acceptable alternative. Sighted users can always see the label, and screen reader users hear it announced when the form field receives focus.

<label>
  Phone number
  <input type="tel">
</label>

Example 7

This example has a visible label, and an accessible name via matching for and id values.

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

<label for="full-name">Full name</label>
<input id="full-name">

Testing home