Inclusive design to improve products and services

Workshop Description:
According to the Office for National Statistics, there are over 10 million disabled people in the UK, representing around 15% of the population. More than ever before, the need to deliver inclusive, accessible digital products and services constitutes both a moral and a commercial imperative.

Accessible products ensure that people with disabilities – whether they are cognitive, physical, visual or auditory – can interact with, navigate and contribute to the web. Molly will begin the session by talking openly about her experience with Usher Syndrome and sharing her views on how technology can be better designed and configured to improve digital experiences for everyone and not just those with an impairment.

Molly and Chris from Sigma, will then guide attendees through the various challenges and obstacles that commonly prevent impaired users from engaging with digital products or services and show you how Molly uses assistive technologies along with demos of other popular tools.

We’ll also give you a chance to try using screen readers and screen magnification tools, vision impairment glasses and mobility gloves.

After this workshop, you’ll have a better understanding of the challenges users of assistive technologies encounter and learn the basic principles that will help you evaluate your own digital products to ensure you are providing the best, most inclusive experience for all your users.

Transcript

1. Inclusive design to improve products and services UX Copenhagen 2020
2. wearesigma.com @wearesigma Thinking about inclusion
3. wearesigma.com @wearesigma 1 in 7 1 billion People with long-term disability worldwide World Health Organisation
4. wearesigma.com @wearesigma 21% 14.1 million People in the UK have some form of disability ONS
5. wearesigma.com @wearesigma Why inclusion matters
6. wearesigma.com @wearesigma My story
7. wearesigma.com @wearesigma Usher syndrome = Deafness + Retinitis Pigmentosa RP is the second most common cause of blindness after aging
8. wearesigma.com @wearesigma Acquiring a disability ≠ being born with a disability
9. wearesigma.com @wearesigma My life revolves around technology
10. wearesigma.com @wearesigma However, technology doesn’t fully compensate
11. wearesigma.com @wearesigma Anyone can have challenges ‣ Disability is more common than you may think ‣ We will all experience disability at some point ‣ By the age of 45 most of us will need glasses ‣ Yet many websites do not support dynamic text ‣ Many on iPhone use 'Large Text,’ a lot of apps aren’t compatible.
12. wearesigma.com @wearesigma
13. wearesigma.com @wearesigma Accessibility should not be considered as an afterthought, or as ‘help’ but as reasonable built-in adjustments for all...
14. wearesigma.com @wearesigma What is the best way to design for inclusion?
15. wearesigma.com @wearesigma The best examples of inclusive design are formed from user needs, not just compliance
16. wearesigma.com @wearesigma What’s wrong with this picture? Having a braille sign that points to a light
17. wearesigma.com @wearesigma Designing for extremes
18. wearesigma.com @wearesigma
19. wearesigma.com @wearesigma Types of impairment Visual Ability to perceive or process visual information Auditory Ability to perceive or process auditory information Sensorimotor Ability to feel and manipulate a physical device quickly, smoothly, and accurately Cognitive Ability in mentally demanding areas: reading, memory, attention, language, complex concepts, problem solving Speech Ability to produce speech sounds clearly, smoothly, and understandably
20. wearesigma.com @wearesigma Types of impairment - Long term Visual Blindness, low vision, colour blindness, presbyopia, floaters cataracts, macular degeneration, nerve damage Auditory Tinnitus, bony growth in the ear, nerve damage, hearing loss due to ageing or long- term exposure to loud noise Sensorimotor Dyspraxia, RSI, arthritis, cerebral palsy, Parkinson’s, Essential Tremor, nerve damage Cognitive Down syndrome, Asperger, AD/HD, brain injury, dyslexia, dementia, learning difficulties Speech Apraxia, dysarthria, stammering, laryngeal/oral cancer, smoking, nodules/polyps, brain injury, strong accent
21. wearesigma.com @wearesigma Types of impairment - Short term Visual Forgot my glasses Glare on a device in bright sunlight Auditory Medication, perforated eardrum, excess ear wax, acoustic neuroma, exposure to sudden loud noises Noisy environment Sensorimotor Temporary injury, such as a broken wrist Carrying a child / umbrella / mug / laptop Cognitive Medication Tiredness, stress Hangover Speech Laryngitis, throat infection, allergic reaction Hoarseness after shouting / singing
23. wearesigma.com @wearesigma Let’s normalise inclusive design
24. wearesigma.com @wearesigma Because, when we get it right, it becomes invisible
25. wearesigma.com @wearesigma Because, when we get it right it becomes invisible
26. wearesigma.com @wearesigma Video captions
27. wearesigma.com @wearesigma The different types of assistive technologies
28. wearesigma.com @wearesigma
29. wearesigma.com @wearesigma How Molly uses technology
30. wearesigma.com @wearesigma What can we do to be more inclusive?
31. wearesigma.com @wearesigma Often when we think about different devices, we think about the screen-size first
32. wearesigma.com @wearesigma Input devices Touch & gestures Voice Pointing devices But the ways in which we interact can be very different
33. wearesigma.com @wearesigma iPhone 4 Design for comfort
34. wearesigma.com @wearesigma iPhone 4 iPhone 5 iPhone 6 iPhone 6+ Design for comfort
35. wearesigma.com @wearesigma iPhone 4 iPhone 5 iPhone 6 iPhone 6+ Design for comfort Navigation systems on larger screens can be uncomfortable to use
36. wearesigma.com @wearesigma Standard touch size of 7-10mm Provide 3-5mm inactive space around elements Design hit areas to be easy to click or tap
37. wearesigma.com @wearesigma Clear visual hierarchy Headings, headings, headings Reading age of 11-12 years is generally good practice Design for legibility and readability 10-15 words on a line
38. wearesigma.com @wearesigma Show What the error is Where the error is How to fix it Help users fix errors
39. wearesigma.com @wearesigma Custom controls can be very empowering or very prohibitive Think carefully before using custom controls
40. wearesigma.com @wearesigma Design for the full spectrum of your users .
41. wearesigma.com @wearesigma Can you find any black holes? . Content can be hidden if you do not use A tags for actions
42. wearesigma.com @wearesigma Don’t force users to remember things they don’t need to . Flybe asks you to enter details the system already knows about you (when logged in)
43. wearesigma.com @wearesigma Sometimes people want or need a human Being a digital service doesn’t mean you should make it harder for people to engage with a real person. When we run inclusive usability sessions we frequently hear requests for systems to include chat interfaces along with other contact methods (email, phone, etc). Chat interfaces often provide a valuable way for users who can’t use, or dislike using a phone to get essential support .
44. wearesigma.com @wearesigma Run mixed ability usability sessions for greater depth and alignment of insights .
45. wearesigma.com @wearesigma Everyone will experience a real need for inclusive services at least once in their lives Consider everyone's journey .
46. Thank you. Questions? For copies of the slides, handouts, and a set of useful resources (or if you want help or have more questions) Chris.bush@sigma.se - @suthen Molly.watt@sigma.se - @Mollywatttalks
47. Accessibility Guidelines WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ And an excellent quick guide from https://twitter.com/joechidzik (abilitynet) http://3pha.com/wcag2/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/
48. Mobile Guidelines WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/ How WCAG 2.1 guidelines apply to mobile http://w3c.github.io/Mobile-A11y-TF-Note/ ARIA design patterns https://www.w3.org/TR/wai-aria- practices/ BBC mobile accessibility guidelines http://www.bbc.co.uk/guidelines/futuremedi a/accessibility/mobile Open AJAX Examples using ARIA http://oaa-accessibility.org/
49. Assistive technology and tools WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/ NVDA free screen reader http://www.nvaccess.org ZoomText screen magnifier https://www.zoomtext.com/products/zoom text-magnifierreader/ How automated accessibility checkers compare and what issues they pick up https://alphagov.github.io/accessibility-tool- audit/index.html Funkify (Chrome plugin) https://www.funkify.org
50. Automated Tools WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/ Wave Chrome extension https://chrome.google.com/webstore/detai l/wave-evaluation- tool/jbbplnpkjmmeebjpijfedlgcdilocofh Achecker – automated test using code view http://achecker.ca/checker/index.php SiteImprove – automated test using code and style sheets https://siteimprove.com/ Sort sight (by Power mapper) -tests more than one page at a time http://www.powermapper.com/products/s ortsite/
51. PDF Tools WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/ Adobe Acrobat Pro https://acrobat.adobe.com European Internet Inclusion Initiative PDF automated checker http://checkers.eiii.eu/en/pdfcheck/ W3C guidelines for PDFs https://www.w3.org/TR/WCAG- TECHS/pdf.html Government advice for PDFs https://www.gov.uk/guidance/how-to- publish-on-gov-uk/accessible-pdfs
52. Great reads WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/ WebAIM million website review https://webaim.org/projects/million MisMatch Design https://mismatch.design Exploring the UK’s digital divide https://www.ons.gov.uk/peoplepopulati onandcommunity/householdcharacteristi cs/homeinternetandsocialmediausage/ar ticles/exploringtheuksdigitaldivide/2019- 03-04 Inclusive Design Principles https://inclusivedesignprinciples.org
53. WCAG 2.1 guidelines for accessibility https://www.w3.org/TR/WCAG20/ Interactive WCAG 2.1 guidelines, using WEBAIM recommendations http://bit.ly/2q1rMyD 18F Accessibility Guide https://accessibility.18f.gov/tools/ GDS accessibility posters https://accessibility.blog.gov.uk/2016/09/02 /dos-and-donts-on-designing-for- accessibility/ Inclusive Design Patterns https://assets.cms.gov/resources/framewor k/2.0/Pages/index.html Microsoft: respecting focus http://human.cx/media/1042/respecting- focus-a-behavior-guide-for-intelligent- systems.pdf Accessibility for Teams https://accessibility.digital.gov Microsoft: inclusive design toolkit https://download.microsoft.com/downlo ad/b/0/d/b0d4bf87-09ce-4417-8f28- d60703d672ed/inclusive_toolkit_manual _final.pdf