no-visible-label

Description

Labels associated with form controls or interactive elements must be visually visible to users. This ensures that all users, including those with cognitive disabilities, can understand the purpose of the control. The no-visible-label rule aligns with WCAG Success Criterion 3.3.2 (Labels or Instructions), which requires that proper labels or instructions are provided when content requires user input.

Visible labels are critical for providing context and clarity. If a label is not visible, users may struggle to understand the purpose of the control, leading to a poor user experience.

Examples

In the following example, the label for the input field is present in the code but is hidden using CSS. This violates the no-visible-label rule because the label is not visible to users.

In the corrected example, the label is made visible, ensuring that users can see and understand the purpose of the input field:

How to fix?

To fix violations of the no-visible-label rule, follow these steps:

1. Ensure that all form controls or interactive elements have associated labels.
2. Make sure the labels are visually visible to users. Avoid hiding labels using CSS properties like display: none or visibility: hidden.
3. If a label must be hidden for design purposes, use techniques that keep the label accessible to screen readers, such as providing an aria-label with the correct label. Moreover, ensure that the context of the field makes the purpose of the field clear to a visual user.
4. Verify that the visible label text matches or is included in the accessible name for the control.

Reference

WCAG Success Criterion 3.3.2: Labels or Instructions