Inclusive forms: Anatomy of a (fictional) GOV.UK service

Last night I spoke for the first time at the London Accessibility Meetup.

I talked about how we build inclusive online forms across government, using a fictional GOV.UK service as an example.

To those who weren’t able to make it, the talk is available on YouTube.

In putting it together I found myself pulling together information from loads of different blog posts, previous talks, and from pull requests and issues from GitHub.

This is an attempt to link out to all of those things, for anyone that wants to find out more.

Update: I gave this talk again at MK Geek Night on 5 September 2019, as ‘Government services that work for everyone’. This version of the talk has been updated slightly to include new changes since February, and to adapt it for a more general audience. I’ve tried to document what was changed.

Have I missed something out here? Feel free to edit this post on GitHub and raise a pull request.

Introduction #

1. Start Page #

Naming your service using verbs, not nouns #

Conveying page structure using headings #

Clear and consistent focus states #

Update: Since September 2019:

2. Have you held a juggling licence before? #

Supporting users who change colours in their browser #

Start with one thing per page #

Making a legend a heading #

Custom radio buttons and checkboxes #

3. Previous licence details #

Form layout #

Asking for dates #

Helping users understand when there is a problem #

Linking from the error summary to different fields #

Associating the error message with the input #

Update: Since September 2019:

4. What is your most impressive juggling trick? #

Making a legend a label #

Providing feedback using a character count #

5. Check your answers #

6. Confirmation page #

Corrections & changes #

  • ‘Register as a childminder’ is built by Ofsted, not the Department for Education.

Changes made for ‘government services that work for everyone’ #

For the talk at MK Geek Night in September 2019:

  • The title of the talk was changed, and some additional introduction content added.
  • The section on focus states was updated to include information about changes that we’ve made (the previous talk explained the problem, but at that point we did not have a solution)
  • (Nearly) all of the screenshots were updated to use the new colour palette and focus states
  • Some of the more technical detail was removed
  • Details about the WCAG 2.1 1.4.11 ‘Non-text contrast’ criteria were removed – I now just mention that the old focus state meant that we ‘were not meeting new accessibility guidelines’
  • The section on error messages was updated to talk about the visually hidden ‘Error’ prefix
  • A slide was added to try and better credit all of the brilliant individuals who have done so much of the work