Skip to main content

Make sure that answers are connected to a question

Input fields separated too far from the initial question cause barriers for users who struggled to remember the question.

Typical examples that cause barriers

Example 1

This example can happen when showing information about a user that they need to check.

Contents

Open this example in a new tab 

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <div class="govuk-form-group">
    <span class="govuk-caption-l">Original version</span>
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="example">
        What is your Self Assessment Unique Taxpayer Reference (UTR)?
      </label>
    </h1>
    <p class="govuk-body">
      Your UTR can be 10 or 13 digits long. You can find it.
    </p>
    <ul class="govuk-list govuk-list--bullet">
      <li>in your Personal Tax Account</li>
      <li>the HMRC app</li>
      <li>on tax returns and other documents from HMRC</li>
    </ul>
    <p class="govuk-body">
      It might be called ‘reference’, ‘UTR’ or ‘official use’. <a class="govuk-link" rel="noreferrer noopener" target="_blank" href="https://www.gov.uk/find-utr-number">Get more help to find your UTR (opens in new tab)</a>
    </p>
    <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>

<form class="govuk-!-width-two-thirds" action="#" method="post">
  <div class="govuk-form-group">
    <span class="govuk-caption-l">Original version</span>
    <h1 class="govuk-label-wrapper">
      <label class="govuk-label govuk-label--l" for="example">
      What is your Self Assessment Unique Taxpayer Reference (UTR)?
      </label>
    </h1>

    <p class="govuk-body">
      Your UTR can be 10 or 13 digits long. You can find it.
    </p>

    <ul class="govuk-list govuk-list--bullet">
      <li>in your Personal Tax Account</li>
      <li>the HMRC app</li>
      <li>on tax returns and other documents from HMRC</li>
    </ul>

    <p class="govuk-body">
      It might be called ‘reference’, ‘UTR’ or ‘official use’. <a class="govuk-link" rel="noreferrer noopener" target="_blank" href="https://www.gov.uk/find-utr-number">Get more help to find your UTR (opens in new tab)</a>
    </p>

    <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
  </div>

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

A complex question must have a header, information and then the question - without this it is difficult for screen readers to show that there is context or for people with memory issues to remember what is being asked.

Example 2

This example can happen when showing information about a user that they need to check.

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">
    Select an address
  </h1>
  <p class="govuk-body">
    5 Addresses found for NE1 1LE.
    <a class="govuk-link" href="#">Search again</a>.
  </p>
  <div class="govuk-form-group">
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="address" name="address" type="radio" value="address-1">
        <label class="govuk-label govuk-radios__label" for="address">
          1 Chancery Lane
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="address-2" name="address" type="radio" value="address-2">
        <label class="govuk-label govuk-radios__label" for="address-2">
          2 Chancery Lane
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="address-3" name="address" type="radio" value="address-3">
        <label class="govuk-label govuk-radios__label" for="address-3">
          3 Chancery Lane
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="address-4" name="address" type="radio" value="address-4">
        <label class="govuk-label govuk-radios__label" for="address-4">
          4 Chancery Lane
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="address-5" name="address" type="radio" value="address-5">
        <label class="govuk-label govuk-radios__label" for="address-5">
          5 Chancery Lane
        </label>
      </div>
    </div>
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
  <p class="govuk-body">
    <a class="govuk-link" href="#">Enter address manually</a>
  </p>
</form>

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

  <h1 class="govuk-heading-l">
    Select an address
  </h1>

  <p class="govuk-body">
    5 Addresses found for NE1 1LE.
    <a class="govuk-link" href="#">Search again</a>.
  </p>

  {{ govukRadios({
    name: "address",
    items: [{
      text: "1 Chancery Lane",
      value: "address-1"
    }, {
      text: "2 Chancery Lane",
      value: "address-2"
    }, {
      text: "3 Chancery Lane",
      value: "address-3"
    }, {
      text: "4 Chancery Lane",
      value: "address-4"
    }, {
      text: "5 Chancery Lane",
      value: "address-5"
    }]
  }) }}

  {{ govukButton({
    text: "Continue"
  }) }}

  <p class="govuk-body">
    <a class="govuk-link" href="#">Enter address manually</a>
  </p>
</form>

This example puts links between the fieldset and the radio buttons, meaning screen reader users are unlikely to get the link announced. It also causes issues for showing error messages.

Improved versions

Improvement 1

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 Self Assessment Unique Taxpayer Reference (UTR)
  </h1>
  <p class="govuk-body">
    You can find it in your Personal Tax Account, the HMRC app or on tax
    returns and other documents from HMRC. It might be called ‘reference’,
    ‘UTR’ or ‘official use’.
  </p>
  <p class="govuk-body">
    <a class="govuk-link" rel="noreferrer noopener" target="_blank" href="https://www.gov.uk/find-utr-number">Get more help to find your UTR (opens in new tab)</a>
  </p>
  <div class="govuk-form-group">
    <label class="govuk-label govuk-label--m" for="utr">
      What is your Self Assessment UTR?
    </label>
    <div id="utr-hint" class="govuk-hint">
      Your UTR can be 10 or 13 digits long.
    </div>
    <input
      class="govuk-input govuk-input--width-10" id="utr" name="utr" type="text" aria-describedby="utr-hint">
  </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 Self Assessment Unique Taxpayer Reference (UTR)
  </h1>

  <p class="govuk-body">
    You can find it in your Personal Tax Account, the HMRC app or on tax
    returns and other documents from HMRC. It might be called ‘reference’,
    ‘UTR’ or ‘official use’.
  </p>

  <p class="govuk-body">
    <a class="govuk-link" rel="noreferrer noopener" target="_blank" href="https://www.gov.uk/find-utr-number">Get more help to find your UTR (opens in new tab)</a>
  </p>

  {{ govukInput({
    label: {
      classes: "govuk-label--m",
      text: "What is your Self Assessment UTR?"
    },
    hint: {
      text: "Your UTR can be 10 or 13 digits long."
    },
    classes: "govuk-input--width-10",
    id: "utr",
    name: "utr"
  }) }}

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

Structuring the page to have header, details and question helps screen readers, audio announcers and general ease of memory. Links will also be announced by a screen reader before the question.

Improvement 2

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">
    5 addresses found
  </h1>
  <p class="govuk-body">
    Search results for NE1 1LE.
    <a class="govuk-link" href="#">Search again</a>.
  </p>
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
        Choose address
      </legend>
      <div class="govuk-radios" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address" name="address" type="radio" value="address-1">
          <label class="govuk-label govuk-radios__label" for="address">
            1 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-2" name="address" type="radio" value="address-2">
          <label class="govuk-label govuk-radios__label" for="address-2">
            2 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-3" name="address" type="radio" value="address-3">
          <label class="govuk-label govuk-radios__label" for="address-3">
            3 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-4" name="address" type="radio" value="address-4">
          <label class="govuk-label govuk-radios__label" for="address-4">
            4 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-5" name="address" type="radio" value="address-5">
          <label class="govuk-label govuk-radios__label" for="address-5">
            5 Chancery Lane
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
  <p class="govuk-body">
    <a class="govuk-link" href="#">Enter address manually</a>
  </p>
</form>

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

  <h1 class="govuk-heading-l">
    5 addresses found
  </h1>

  <p class="govuk-body">
    Search results for NE1 1LE.
    <a class="govuk-link" href="#">Search again</a>.
  </p>

  {{ govukRadios({
    fieldset: {
      legend: {
        classes: "govuk-fieldset__legend--m",
        text: "Choose address"
      }
    },
    name: "address",
    items: [{
      text: "1 Chancery Lane",
      value: "address-1"
    }, {
      text: "2 Chancery Lane",
      value: "address-2"
    }, {
      text: "3 Chancery Lane",
      value: "address-3"
    }, {
      text: "4 Chancery Lane",
      value: "address-4"
    }, {
      text: "5 Chancery Lane",
      value: "address-5"
    }]
  }) }}

  {{ govukButton({
    text: "Continue"
  }) }}

  <p class="govuk-body">
    <a class="govuk-link" href="#">Enter address manually</a>
  </p>
</form>

This example reintroduced a clear fieldset header for the radio buttons, and also changes the existing fields to separate searching for an existing result with choosing one based on the previous information.