Mike's Notes
The UK Government has created a design system for building accessible websites. It includes many templates, components, tools, code, and guidance on achieving 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 intended to help Mike (me), who has synesthesia (that's why everything is colour-coded), keep notes and share them with collaborators. It is not intended to be accessible.
Resources
- https://design-system.service.gov.uk/
- https://www.blog.ajabbi.com/p/pipi.html
- https://www.blog.ajabbi.com/p/about-me.html
- https://www.w3.org/TR/WCAG21/
- https://en.wikipedia.org/wiki/Braille
- https://en.wikipedia.org/wiki/Deafblindness
- https://en.wikipedia.org/wiki/Screen_reader
- https://en.wikipedia.org/wiki/Screen_magnifier
- https://en.wikipedia.org/wiki/Visual_impairment
- https://en.wikipedia.org/wiki/Irlen_syndrome
- https://en.wikipedia.org/wiki/Color_blindness
- https://en.wikipedia.org/wiki/Dyslexia
- https://en.wikipedia.org/wiki/Dyscalculia
- https://en.wikipedia.org/wiki/Autism
- https://en.wikipedia.org/wiki/Photosensitive_epilepsy
- https://en.wikipedia.org/wiki/Synesthesia
- https://en.wikipedia.org/wiki/Stroke
- https://en.wikipedia.org/wiki/Muscular_dystrophy
References
- Reference
Repository
- Home > Ajabbi Research > Library >
- Home > Handbook >
Last Updated
18/05/2025
UK Government Design System
Mike is the inventor and architect of Pipi and the founder of Ajabbi.
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 require a more straightforward UI
- Muscular Dystrophy (large buttons)
The current testing process steps are,
- Speak to groups of people and their organisations with everyday accessibility needs. Ask for volunteers.
- 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?
- Use personalised handmade web pages for volunteers to test.
- 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
UK Gov Design System
The UK government's design principles and examples of their use.
- Start with user needs
- Do less
- Design with data
- Do the hard work to make it simple
- Iterate. Then iterate again
- This is for everyone
- Understand context
- Build digital services, not websites
- Be consistent, not uniform
- Make things open: it makes things better
- 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
- Addresses
- Bank details
- Dates
- Email addresses
- Equality information
- Gender or sex
- Names
- National Insurance numbers
- Passwords
- Payment card details
- Telephone numbers
- 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
- Confirmation pages
- Cookies page
- Page not found
- There is a problem with the service pages
- Question pages
- Service unavailable pages
- Step-by-step navigation
No comments:
Post a Comment