Skip to main content

Do not omit autocomplete attributes on input fields
Code

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)

  1. Typical example that causes barriers
  2. Improved version
  3. Links

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 

<span class="govuk-caption-xl">
  Original version
</span>
<h1 class="govuk-heading-l">
  Your name
</h1>
<form class="form" action="#" method="post">
  <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 govuk-!-width-one-third" 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 govuk-!-width-one-third" 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 govuk-!-width-one-third" id="lastName" name="lastName" type="text">
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>


  <span class="govuk-caption-xl">
          Original version
        </span>


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

              </h1>
        <form class="form" action="#" method="post">
        

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


        {{ govukInput({
          label: {
            text: "Middle name or names (if you have them)"
          },
          classes: "govuk-!-width-one-third",
          id: "middle-names",
          name: "middleName"
        }) }}

        {{ govukInput({
          label: {
            text: "Family name or names"
          },
          classes: "govuk-!-width-one-third",
          id: "lastName",
          name: "lastName"
        }) }}



        <button type="submit" class="govuk-button" data-module="govuk-button">
          Continue
        </button>
              </form>

Without programatic context, autofill can't guess as to what the field is.

Improved version

Contents

Open this example in a new tab 

<span class="govuk-caption-xl">
  Improved version
</span>
<h1 class="govuk-heading-l">
  Your name
</h1>
<form class="form" action="#" method="post">
  <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 govuk-!-width-one-third" 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 govuk-!-width-one-third" 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 govuk-!-width-one-third" 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>


  <span class="govuk-caption-xl">
          Improved version
        </span>


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

              </h1>
        <form class="form" action="#" method="post">
        

        {{ govukInput({
          label: {
            text: "First name or names"
          },
          hint: {
            text: "This must be your legal first name or names"
          },
          classes: "govuk-!-width-one-third",
          id: "first-name",
          name: "firstName",
          spellcheck: false,
          attributes: {
           autocomplete: "first-name"
          }
        }) }}


        {{ govukInput({
          label: {
            text: "Middle name or names (if you have them)"
          },
          classes: "govuk-!-width-one-third",
          id: "middle-names",
          name: "middleName",
          spellcheck: false,
          attributes: {
           autocomplete: "additional-name"
          }
        }) }}

        {{ govukInput({
          label: {
            text: "Family name or names"
          },
          classes: "govuk-!-width-one-third",
          id: "lastName",
          name: "lastName",
          spellcheck: false,
          attributes: {
           autocomplete: "family-name"
          }
        }) }}




        <button type="submit" class="govuk-button" data-module="govuk-button">
          Continue
        </button>
              </form>

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