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