placeholder-as-label

Description

Input fields must have labels. Do not use placeholders as the only method to describe the purpose of a form element. Placeholders disappear when a user enters text, making it difficult for users with cognitive or memory disabilities to confirm their input. Screen readers may not consistently announce placeholders, which can prevent users from understanding what to enter.

The placeholder-as-label rule aligns with WCAG Success Criterion 3.3.2 (Labels or Instructions) and WCAG Success Criterion 1.3.1 (Info and Relationships).

The first success criteria requires you to provide labels or instructions when users need to enter information. The placeholder-as-label rule ensures that such labels are present and not substituted by a placeholder. The second success criteria requires that the information, structure, and relationships conveyed through presentation are programmatically determinable. The placeholder-as-label rule ensures that input fields have proper programmatic labels.

Examples

The following example violates the placeholder-as-label rule. It uses a placeholder to describe the input field without an associated <label> element.

In the following corrected example, an explicit element is associated with the input field. The for attribute in the label matches the id attribute of the input. This ensures the input has a proper programmatic label.

How to fix?

To fix violations of the placeholder-as-label rule, follow these steps:

1. Identify all input fields that lack a visible <label> element.

2. Add a <label> element for each input field.

3. Use the for attribute in the <label> to match the id of the corresponding input field. This creates a programmatic association.

4. Ensure the label’s text clearly describes the purpose of the input field.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships

• WCAG Success Criterion 3.3.2: Labels or Instructions