Skip to main content

Make sure that answers are connected to a question
Design

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

  1. Typical examples that cause barriers
  2. Improved versions
  3. Links

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 

<span class="govuk-caption-xl">
  Original version
</span>
<form class="form" action="#" method="post">
  <div class="govuk-form-group">
    <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.
    <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>
    <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>



  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}



    {%- from "govuk/components/tag/macro.njk" import govukTag -%}


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



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




        <div class="govuk-form-group">
          <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.
             <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>



        <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>


  {{ appProseScope(content) if content }}

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 

<span class="govuk-caption-xl">
  Original version
</span>
<form class="form" action="#" method="post">
  <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">
    <fieldset class="govuk-fieldset">
      <div class="govuk-radios" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-1" name="address" type="radio" value="1 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            1 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-2" name="address" type="radio" value="2 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            2 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-3" name="address" type="radio" value="3 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            3 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-4" name="address" type="radio" value="4 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            4 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-5" name="address" type="radio" value="5 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            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>


  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}



    {%- from "govuk/components/tag/macro.njk" import govukTag -%}


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



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






          <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">

      <fieldset class="govuk-fieldset">


        <div class="govuk-radios" data-module="govuk-radios">






{% for i in range(1, 6) -%}
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="address-{{i}}" name="address" type="radio" value="{{i}} Chancery lane">
            <label class="govuk-label govuk-radios__label" for="higher-further-education">
            {{i}} Chancery Lane
            </label>

          </div>


{% endfor %}






        </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>


  {{ appProseScope(content) if content }}

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 

<span class="govuk-caption-xl">
  Improved version
</span>
<form class="form" action="#" method="post">
  <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>



  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}



    {%- from "govuk/components/tag/macro.njk" import govukTag -%}


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



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





        <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>

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 

<span class="govuk-caption-xl">
  Improved version
</span>
<form class="form" action="#" method="post">
  <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">
        <h2 class="govuk-fieldset__heading">
          Choose address
        </h2>
      </legend>
      <div class="govuk-radios" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-1" name="address" type="radio" value="1 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            1 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-2" name="address" type="radio" value="2 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            2 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-3" name="address" type="radio" value="3 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            3 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-4" name="address" type="radio" value="4 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            4 Chancery Lane
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="address-5" name="address" type="radio" value="5 Chancery lane">
          <label class="govuk-label govuk-radios__label" for="higher-further-education">
            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>



  {{ govukNotificationBanner({
    text: "This page was last reviewed on " + (reviewed | date("d LLLL y")) + ".
    It needs to be reviewed again on " + (reviewAgain | date("d LLLL y")) + "."
  }) if reviewed and reviewAgain }}



    {%- from "govuk/components/tag/macro.njk" import govukTag -%}


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



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






          <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">
   <h2 class="govuk-fieldset__heading">
     Choose address
   </h2>
 </legend>

        <div class="govuk-radios" data-module="govuk-radios">






{% for i in range(1, 6) -%}
          <div class="govuk-radios__item">
            <input class="govuk-radios__input" id="address-{{i}}" name="address" type="radio" value="{{i}} Chancery lane">
            <label class="govuk-label govuk-radios__label" for="higher-further-education">
            {{i}} Chancery Lane
            </label>

          </div>


{% endfor %}






        </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>


  {{ appProseScope(content) if content }}

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.