Form elements have associated labels

Form fields have labels so screen readers can identify them.

On this page

    Impact

    ScanGov impact ratings

    About

    Labels ensure that form controls are announced properly by assistive technologies, like screen readers.

    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: input with only a placeholder, no label -->
<input type="email" placeholder="Email address">

    Passing pattern:

    <!-- Pass: visible label associated via for/id -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.gov">

    Error

    ScanGov messaging when a site fails a standard:

    Failed: Form elements have associated labels

    Examples

    Failing pattern:

    <input type="email" placeholder="Email">

    Passing pattern:

    <label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.gov">

    Guidance

    Indicators

    On this page