Asking for nationality

As part of opening up the service to international candidates, we changed how we ask candidates for their nationality, providing explicit options for British and Irish, and allowing more than 2 nationalities to be entered as free text.

However, there were a few problems with this design.

The problem with free text#

If a candidate had 2 or more nationalities, they had to enter them as free text. This meant we could not use structured data.

The problem with the design logic#

Candidates who had British or Irish nationality as well as an additional overseas nationality were shown questions about residency and English language qualifications which were not relevant to them.

What we did#

We looked at patterns used on other GOV.UK services, such as Register to Vote:

This pattern solves the above issues, but we made some changes.

We will not use hint text for the British and Irish nationality options. Our hypothesis is that candidates will know which boxes are relevant to them without the explanation. We’ll test this with users.

We will use nationality instead of country. The Home Office refers to ‘nationality’ and ‘national of [country]’ on its visa checking tool and English language visa eligibility guidance. We ask about nationality primarily for visa purposes, so it makes sense to be consistent with the Home Office.

Accessibility considerations#

This pattern allows candidates to add up to 3 other nationalities in addition to British and Irish.

We need to show different fields and buttons depending on how many nationalities are added.

With 1 or 2 fields, the ‘Add another nationality’ button is shown.

With 2 or 3 fields, each field shows a corresponding ‘Remove’ button.

With 3 fields, the ‘Add another nationality’ button is hidden
These state changes could present a challenge to screen reader users.

We’ll make this behaviour easier to understand by:

  • using hidden labels such as ‘first nationality’, ‘second nationality’ and so on
  • announcing full label names on the remove buttons, eg ‘Remove first nationality’
  • returning focus to the page heading when removing a field

We’re announcing label descriptions because it helps users keep track of which fields are being added or removed. However, we’re not visually displaying them as there is no implicit order to the nationalities a candidate has. We’d like to avoid having 2 different experiences, but this seems like a reasonable tradeoff between meeting accessibility needs and making the content understandable to an international audience.

If JavaScript is not present, a candidate is shown 3 select menus - one for each nationality they can add.

We only need to show one nationality summary item when reviewing these answers, which shows each nationality chosen.