input-label-name-mismatch

Description

You must ensure that form elements have their visible label text as a part of their accessible name.

Users who rely on screen readers or speech-input software access a form element by its accessible name. If the accessible name does not contain the visible label text, it causes confusion. This is especially important when you use attributes like aria-label or aria-labelledby to provide a different or more descriptive accessible name than the visible text. The visible text must still be present within the new accessible name.

The input-label-name-mismatch rule aligns with WCAG Success Criterion 2.5.3: Label in Name, which requires that the accessible name contains the text of the visible label.

Examples

In the following example, the visible label is Email. The accessible name, set by aria-label, is Enter your address. This violates the rule because the visible label “Email” is missing from the accessible name.

In the following corrected example, the visible label text, Email, is included at the start of the descriptive accessible name:

How to fix?

To fix violations of the input-label-name-mismatch rule, follow these steps:

1. Identify the exact visible label text associated with the form element.

2. Ensure the entire visible label text appears as a part of the accessible name. If you use aria-label or aria-labelledby to modify the accessible name, explicitly prepend the visible label text to your value.

Reference

• WCAG Success Criterion 2.5.3: Label in Name