UK Government Design System

Mikes Notes

The UK Government has created a design system for building accessible websites. There is a wealth of templates, components, tools, code and guidance on how to do this.

I am using this design system as a starting point for making the Pipi User Interface (UI) fully accessible.

Please note: This blog is for a technical audience and is to help Mike (me), who has synesthesia (that's why everything is colour-coded), keep notes and share them with collaborators. This blog is not intended to be accessible.

User Testing

Assume every person is unique and allow for personalisation. W3C WCAG 2.1 is the standard to aim for. Accessibility testing is underway in English for,

• Braille Devices for the Deaf-Blind
• Screen Readers
• Screen Magnifiers
• Low Vision
• Irlen's
• Colour Blindness
• Dyslexia
• Dyscalculia
• Autism
• Epilepsy
• Synesthesia
• Strokes
• Older adults requiring more straightforward UI
• Muscular Dystrophy (large buttons)

The current testing process steps are,

1. Speak to groups of people and their organisations with everyday accessibility needs. Ask for volunteers.
2. Watch and learn from people who volunteer with accessible needs. How do they find using a computer to visit and use a website? What are the problems? What works?
3. Use personalised handmade web pages for volunteers to test.
4. Configure the Content Management System (CMS) to generate the web UI automatically to meet the individual accessibility needs of logged-in users.

UK Gov Design System

The UK government's design principles and examples of their use.

1. Start with user needs
2. Do less
3. Design with data
4. Do the hard work to make it simple
5. Iterate. Then iterate again
6. This is for everyone
7. Understand context
8. Build digital services, not websites
9. Be consistent, not uniform
10. Make things open: it makes things better

The Design System components are reusable parts of the user interface that have been made to support various applications.

• Accordion
• Backlink
• Breadcrumbs
• Button
• Character count
• Checkboxes
• Cookie banner
• Date input
• Details
• Error message
• Error summary
• Exit this page
• Fieldset
• File upload
• Footer
• Header
• Inset text
• Notification banner
• Pagination
• Panel
• Phase banner
• Radios
• Select
• Skip link
• Summary list
• Table
• Tabs
• Tag
• Task list
• Text input
• Textarea
• Warning text

Patterns are best-practice design solutions for specific user-focused tasks and page types.

Ask users for…

• Addresses
• Bank details
• Dates
• Email addresses
• Equality information
• Gender or sex
• Names
• National Insurance numbers
• Passwords
• Payment card details
• Telephone numbers

Help users to…

• Check if a service is suitable
• Check answers
• Complete multiple tasks
• Confirm a phone number
• Confirm an email address
• Contact a department or service team
• Create a username
• Create accounts
• Exit a page quickly
• Start using a service
• Recover from validation errors

Pages

• Confirmation pages
• Cookies page
• Page not found pages
• There is a problem with the service pages
• Question pages
• Service unavailable pages
• Step-by-step navigation

Free Posters

The UK Home Office has free Accessibility design posters (PDF).

• DWP Accessibility Manual

Smashing Magazine

Smashing Magazine has even more articles and ebooks on accessibility

Chrome's web.dev

• Accessibility for web developers