Inclusive design to improve products and services

Cc48f12f6c856704ca9efcfa8422bf03?s=47 Chris Bush
March 31, 2020

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.

Cc48f12f6c856704ca9efcfa8422bf03?s=128

Chris Bush

March 31, 2020
Tweet

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
  22. None
  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