form-field-multiple-labels

Ensure form field does not have multiple labels.

Description

Form inputs require proper labeling for screen readers to accurately interpret and convey their meaning and purpose to users. Without adequate labeling, these inputs become inaccessible to users of screen readers and other assistive technologies.

Why is it important?

Assigning multiple labels to a form field can lead to inconsistent results across different combinations of screen readers and browsers. Some combinations may read the first label, while others may read the last label. There are also cases where both labels are read. This inconsistency can cause problems for users and should be avoided.

Examples

• Success:

  • Only one label is assigned to a text-type input element using <label>.

• Failure:

  • Form field element has label assigned by aria-labelledby and <label> element.

How to fix?

Make sure that a form field is associated with only one label.

Tags

cat.forms, wcag2a, wcag332

References

• WCAG 3.3.2: Labels or Instructions
• Deque University: form-field-multiple-labels
• Accessibility Insights: form-field-multiple-labels
• Evinced Digital Accessibility Knowledge Base: form-field-multiple-labels