No form fields have multiple labels

Each form field has only one label so screen readers announce it correctly.

On this page

Impact

ScanGov impact ratings

About

Form fields with multiple labels can be confusingly announced by assistive technologies like screen readers which use either the first, the last, or all of the labels. [Learn how to use form labels](https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels).

Risks

Screen reader users cannot identify or interact with elements.

Why it's important

Gives screen reader users meaningful descriptions of interactive elements so they can understand and use them.

User stories

As a screen reader user, I want all interactive elements to have clear, descriptive names so that I know what they do.

Code

Failing pattern:

<!-- Fail: two labels for one input -->
<label for="email">Email</label>
<label for="email">Enter your email</label>
<input type="email" id="email">

Passing pattern:

<!-- Pass: one label per input -->
<label for="email">Email address</label>
<input type="email" id="email">

Error

ScanGov messaging when a site fails a standard:

No form fields have multiple labels

Guidance

Indicators

On this page