Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next

2

Share

A11y Accessibility Design Workshop

May 14, 2019: UX Design and Sketch South Bay Meetup

Related Books

Free with a 30 day trial from Scribd

See all

A11y Accessibility Design Workshop

  1. 1. Design training
  2. 2. Meet the team Ace Vu QuickBooks Design System Intuit Accessibility Design Lead Yvonne So Platform Ecosystem Accessibility Advocate
  3. 3. Form groups of 4 Sit with people you don’t know (make new friends :D). Try to include a content, visual, and interaction designer. You’ll work as a team and will rely everyone’s expertise. Mingle!
  4. 4. Disclaimer All materials in this presentation are for educational purposes. A few may be taken from: ● W3.org ● Accessibility.digital.gov ● Microsoft.com/design/inclusive ● Intopia.digital ● Apple.com/accessibility ● Google.com/accessibility
  5. 5. Today’s agenda Quick accessibility intro User interview What makes a product accessible? Let’s practice Q&A
  6. 6. Let’s play a game!
  7. 7. Your shoelace is untied (4 mins) Write down all the steps to tie a single shoe.
  8. 8. Roleplay (4 mins) 1 person reads the instructions out loud. 1 person follows the instructions using 1 hand. 1 person closes their eyes and does it with 2 hands. 1 person observes.
  9. 9. Reflection Did the instructions work for everyone? Would you change the instructions? How?
  10. 10. Be my eyes
  11. 11. Who we design for
  12. 12. 1 out of 7 people in the world has some form of disability. - World Health Organization World health report
  13. 13. 10,000 Baby Boomers turn 65 each day.
  14. 14. Disability, n. “...is a complex phenomenon, reflecting an interaction between feature of a person’s body and features of the society in which he or she lives.” - ADA: “Mental, physical, emotional impairment that can substantially limit one or more major life activity.” In the context of ADA, “disability” is a legal term rather than a medical one.
  15. 15. Types of disabilities Vision Physical/movement Thinking/remembering/learning Communicating Hearing Mental health Social relationships + ____
  16. 16. Invisible disabilities “Physical, mental, or neurological condition that limits a person’s movements, senses, or activities invisible to the onlooker.” Examples ● Sensitivities to motion or light ● Color blindness ● Chronic pain ● Brain injuries ● Temporary situations (tinnitus, pregnancy, migraines)
  17. 17. So, what’s accessibility, anyway? Accessibility, n. “...the degree to which a product, service, or environment is available to as many people as possible.”
  18. 18. The pyramid Universal design Inclusion Usability Accessibility
  19. 19. Universal design examples https://commons.wikimedia.org
  20. 20. “Solve for one, extend to many” Microsoft Inclusive Design Kit
  21. 21. Benefits for all A solution that works for a blind person could also benefit car drivers
  22. 22. Persona spectrum “As designers, it’s our responsibility to understand the power of the interactions we design for people. We design to embrace the things that make us human. It’s what drives us to create a world that makes lives better. The result is technology that’s inclusive.”
  23. 23. Learn from our users
  24. 24. User Demo
  25. 25. Design with accessibility in mind
  26. 26. What makes a product accessible? The basic 3 areas ● Visual (vision) ● Interaction and content (vision, hearing, motor, cognition) ● Implementation (vision, hearing, motor, cognition, etc.)
  27. 27. POUR accessibility ● Perceivable ● Operable ● Understandable ○ Role ○ State ○ Value ○ Label ● Robust
  28. 28. Semantic page structure <Book Title> <Chapter 1> <Section 1> <Section 2> <Chapter 2> <Section 1> <Section 2> <Section 3>
  29. 29. Text contrast What is small text and large text? Large text = 18 point text (regular) or 14 point text bold However: “The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px” Abc Abc Abc Abc Abc Abc
  30. 30. Nontext contrast Note: don’t use color alone
  31. 31. Touch targets and pointers (AAA) Touch & pointer targets should be at least 44 x 44 px (48 x 48 dpi on android)
  32. 32. Keyboard focus Make sure interactive elements have focus state
  33. 33. Content Visible text (Includes Titles, paragraphs, labels for UI elements, text on buttons, links, and forms) Non-visible text (Includes alternative text for images, buttons with icons, and captions) Both visible and nonvisible text should be descriptive and meaningful because some users navigate with headings or links.
  34. 34. Sound & motion Sound ● Offer visual alternatives to sound, and vice-versa. ● Provide captioning, a transcript, or other visual cues to critical audio elements and sound alerts. ● Avoid background sounds, autoplay music or video. Motion ● Enable content that moves, scrolls, or blinks automatically to be paused, stopped, or hidden if it lasts more than 5 seconds. ● Limit flashing content to 3 times in a 1- second period to meet flash and red-flash thresholds. ● Avoid flashing large, central areas of the screen. ● Do not use motion alone.
  35. 35. Let’s find some problems
  36. 36. Group discovery (5 mins) 1. Using the printed design handout, find as many problems as possible. 2. Mark them down. Need help? Visit https://accessibility.digital.gov
  37. 37. Share your findings Each group takes turns sharing a problem.
  38. 38. Recap
  39. 39. Let’s fix those problems
  40. 40. Let’s do this 1. Using the cheat sheet, fix a problem you found. 2. Stay within the design system and guidelines. 3. Share your solutions.
  41. 41. Handing off deliverables
  42. 42. What to include 1. Keyboard notations 2. Focus 3. Markup (H1 vs bold) 4. Alt text 5. Window titles 6. Screen-reader-only text 7. Text alternatives for charts and graphs 8. Script for video captions
  43. 43. What it could look like
  44. 44. More examples
  45. 45. Let’s practice 1. Use the same Sketch file 2. Create your own write up along with the design you just fixed to include important information for your engineers.
  46. 46. Test your product
  47. 47. Things to remember for testing 1. Keyboard accessibility 2. Hidden text (descriptive labels for form fields, alternative text for images, buttons with icons, and captions) 3. Zoom (200%, 400%) 4. High contrast and dark mode 5. Screen reader
  48. 48. Q&A
  49. 49. Thank you. Let’s chat more Ace Vu linkedin.com/in/acevu ace_vu@intuit.com Yvonne So linkedin.com/in/yvonneyso yvonne_so@intuit.com Slideshare: http://bit.ly/intuita11y
  50. 50. Resources - Our favorite guidelines on https://accessibility.digital.gov - Check color contrast with http://www.getstark.co - Sketch contrast plugin https://github.com/romannurik/Sketch-Contrast - Volunteer on your own time through your mobile phone with Be My Eyes app - Wave chrome plugin to inspect the site build - Get more design tools, cheat sheet and resources at QuickBooks Design System
  • MargotHelm

    May. 23, 2019
  • ChristinaGibbs1

    May. 22, 2019

May 14, 2019: UX Design and Sketch South Bay Meetup

Views

Total views

204

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

2

×