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,
- 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
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 pages
- There is a problem with the service pages
- Question pages
- Service unavailable pages
- Step-by-step navigation
No comments:
Post a Comment