Do not omit autocomplete attributes on input fields

If you are asking for fields that people regularly complete, autocomplete helps them save time by helping their web browser guess the response.

This mistake can mean a failure of WCAG 2.2 1.3.5: Identify Input Purpose (Level AA)

Typical example that causes barriers

This example can happen with input fields that include saved information like a username, email address or password. Try this with a browser such as Safari.

Contents

Open this example in a new tab

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Original version</span>
  <h1 class="govuk-heading-l">
    Your name
  </h1>
  <div class="govuk-form-group">
    <label class="govuk-label" for="first-name">
      First name or names
    </label>
    <div id="first-name-hint" class="govuk-hint">
      This must be your legal first name or names
    </div>
    <input
      class="govuk-input" id="first-name" name="firstName" type="text" aria-describedby="first-name-hint">
  </div>
  <div class="govuk-form-group">
    <label class="govuk-label" for="middle-names">
      Middle name or names (if you have them)
    </label>
    <input
      class="govuk-input" id="middle-names" name="middleName" type="text">
  </div>
  <div class="govuk-form-group">
    <label class="govuk-label" for="lastName">
      Family name or names
    </label>
    <input
      class="govuk-input" id="lastName" name="lastName" type="text">
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Original version</span>

  <h1 class="govuk-heading-l">
    Your name
  </h1>

  {{ govukInput({
    label: {
      text: "First name or names"
    },
    hint: {
      text: "This must be your legal first name or names"
    },
    id: "first-name",
    name: "firstName"
  }) }}

  {{ govukInput({
    label: {
      text: "Middle name or names (if you have them)"
    },
    id: "middle-names",
    name: "middleName"
  }) }}

  {{ govukInput({
    label: {
      text: "Family name or names"
    },
    id: "lastName",
    name: "lastName"
  }) }}

  {{ govukButton({
    text: "Continue"
  }) }}
</form>

Without programmatic context, autofill can’t guess as to what the field is.

Improved version

Contents

Open this example in a new tab

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Improved version</span>
  <h1 class="govuk-heading-l">
    Your name
  </h1>
  <div class="govuk-form-group">
    <label class="govuk-label" for="first-name">
      First name or names
    </label>
    <div id="first-name-hint" class="govuk-hint">
      This must be your legal first name or names
    </div>
    <input
      class="govuk-input" id="first-name" name="firstName" type="text" spellcheck="false" aria-describedby="first-name-hint" autocomplete="first-name">
  </div>
  <div class="govuk-form-group">
    <label class="govuk-label" for="middle-names">
      Middle name or names (if you have them)
    </label>
    <input
      class="govuk-input" id="middle-names" name="middleName" type="text" spellcheck="false" autocomplete="additional-name">
  </div>
  <div class="govuk-form-group">
    <label class="govuk-label" for="lastName">
      Family name or names
    </label>
    <input
      class="govuk-input" id="lastName" name="lastName" type="text" spellcheck="false" autocomplete="family-name">
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <span class="govuk-caption-l">Improved version</span>

  <h1 class="govuk-heading-l">
    Your name
  </h1>

  {{ govukInput({
    label: {
      text: "First name or names"
    },
    hint: {
      text: "This must be your legal first name or names"
    },
    id: "first-name",
    name: "firstName",
    autocomplete: "first-name",
    spellcheck: false
  }) }}

  {{ govukInput({
    label: {
      text: "Middle name or names (if you have them)"
    },
    id: "middle-names",
    name: "middleName",
    autocomplete: "additional-name",
    spellcheck: false
  }) }}

  {{ govukInput({
    label: {
      text: "Family name or names"
    },
    id: "lastName",
    name: "lastName",
    autocomplete: "family-name",
    spellcheck: false
  }) }}

  {{ govukButton({
    text: "Continue"
  }) }}
</form>

Using autocomplete means that any saved fields are more likely to be correctly suggested.