Individual segments of the multi-part form field are not named/labeled.

Link to Individual segments of the multi-part form field are not named/labeled. copied to clipboard
Rule ID:
form-parts-unnamed
User Impact:
Serious
WCAG :
1.3.1.c

Background

People who are blind cannot see the visual layout of forms in order to learn that a label is next to a form element, or that a group of form elements is below a group label. They need this information to be expressed semantically. In order to understand the relationship of the form fields, their individual labels, and their group label, the relationships must be expressed semantically. In the case of a multi-part form field, such as when a phone number or social security number is broken into multiple parts, a sighted user can see the three text fields, their size, and their relationship to the title. A screen reader user needs each field to be labelled individually to learn this information. When grouped form elements and their group label are expressed semantically, a screen reader user can put focus on a form element and the screen reader will read the form element label and element type as well as the group label.

To fix this issue, provide a label for each field in the multi-part form field.

Code Examples

Good Example:

Each section of three related forms fields has a <title>

<div role="group" aria-labelledby="phone1">
  <p id="phone1">Phone number</p>
  <span>(</span>
    <input type="text" size="3" aria-required="true" title="first three digits">
  <span>)</span>
    <input type="text" size="3" aria-required="true" title="middle three digits">
  <span>-</span>
    <input type="text" size="4" aria-required="true" title="last four digits">
</div>

Failure Example:

The group of form fields is labelled, but each individual field is not.

<div role="group" aria-labelledby="phone1">
  <p id="phone1">Phone number</p>
  <span>(</span>
    <input type="text" size="3" aria-required="true">
  <span>)</span>
    <input type="text" size="3" aria-required="true">
  <span>-</span>
    <input type="text" size="4" aria-required="true">
</div>

How To Fix

Fix this issue by doing one of the following:

  • Provide a label for each field using an aria-label.
  • Provide a label for each field using the title attribute.

Don't do this:

  • Rely on visual relationships to convey information to non-sighted users.

References

Is this page helpful?

Help us improve this page

Still need help?