label-not-persistent

Description

Labels for form controls or interactive elements must remain visible at all times. This ensures that users, including those relying on assistive technologies, can always identify the purpose of the control or element.

Labels that disappear or become hidden when interacting with a control can confuse users, especially those with cognitive disabilities or those using screen readers.

The label-not-persistent rule aligns with WCAG Success Criterion 3.3.2 (Labels or Instructions), which requires that labels or instructions are provided when content requires user input.

Examples

In the following example, the label for the input field disappears when the user starts typing, violating the label-not-persistent rule:

In the corrected example, the label remains visible at all times, ensuring users can always identify the purpose of the input field:

How to fix?

To fix violations of the label-not-persistent rule, follow these steps:

1. Ensure that labels for form controls or interactive elements are always visible.
2. Avoid using placeholder text as a replacement for visible labels.
3. Use ARIA attributes (e.g., aria-label or aria-labelledby) only when a visible label cannot be provided, and ensure the label is still accessible to assistive technologies.
4. Test your implementation with screen readers and other assistive tools to confirm labels remain accessible and visible.

Reference

WCAG Success Criterion 3.3.2: Labels or Instructions