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.

Designing for Accessibility with Accessibility in Mind #bigd19

302 views

Published on

Copyright IBM 2019

Full presentation here: https://youtu.be/Sl4ElInWZmM

Designers often think of accessibility as a box to check before shipping a product. But what does it mean to be delightfully accessible instead of hitting the benchmark of accessibility best practices?

Furthermore, how can we better incorporate accessibility into the design process and enable those with visual impairments to provide feedback earlier? Today, visually impaired users can only provide feedback with a developed application that is compatible with a screen reader. By that time, many changes would require code refactoring, which would increase company expenses and delay improvements. Excluding valuable input from vision impaired users, a group of almost 300 million people, due to technical limitations is unacceptable and can be mitigated by the process we have developed through IBM Design Thinking.

Attendees will learn about our process and how we designed a system to bring accessibility earlier into our conversations. We will share how we worked with a vision impaired development manager to design a tactile wire-framing kit that we now use to communicate designs to people with vision impairments. This session will inspire teams to design for accessibility with accessibility in mind.

https://bigdesignevents.com/
https://www.linkedin.com/in/jennylanier/
https://www.linkedin.com/in/steven-raden-76031a62/
https://www.linkedin.com/in/janellearita/alk

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designing for Accessibility with Accessibility in Mind #bigd19

  1. 1. Janelle Arita, Jenny Lanier, and Steven Raden IBM Design Designing for Accessibility
 with Accessibility in Mind
  2. 2. 3 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Take Snapshot All security groups ActiveSecuritygroupname Id: 4d528a48-a620-11e8-98d0-529269fb1459 5 rules remaining 2 interfaces remaining|| Rules Attached Interfaces (105603…smith)Catalog Docs Support ManageIBM Cloud ValueProtocolDestination Items per page: 10 | 1 of 10 of 11 items 1 of 2 pages 1 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 UDP Any TCP Any 200 Any 800 22 – 85 Items per page: 10 | 1 of 4 of 4 items 1 of 1 pages 1 Search Search Add ruleEdit rulesRefresh Add ruleEdit rulesRefresh Inbound rules Outbound rules ValueProtocolSource 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 UDP TCP Any UDP TCP Any UDP Any TCP Any Any 22 – 80 39 Any 8001 – 8051 22 53 Any 800 22 – 85 123e4567-e89b-12d3-a456-426655440000
  3. 3. 4 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  4. 4. 5 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking People with vision impairments use screen readers like JAWS to engage with computers. Job Access With Speech JAWS Screenreader
  5. 5. 6 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Insert steven’s video (can’t do over iCloud unless under 50 mb) https://ibm.box.com/s/u8zmp7lz610dyskpe2h7h513ogflro7v
  6. 6. 7 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  7. 7. 8 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Take Snapshot All security groups ActiveSecuritygroupname Id: 4d528a48-a620-11e8-98d0-529269fb1459 5 rules remaining 2 interfaces remaining|| Add ruleEdit rulesRefresh Items per page: 10 | 1 of 10 of 11 items 1 of 2 pages 1 Protocol UDP TCP Any UDP TCP Any ICMP Any TCP Any Value Any 22 – 80 Any 8001 – 8051 Type: 5, Code: 10 Any 800 22 – 85 Source 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 CIDR Block Security Group CIDR Block Inbound rules ValueDestination Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Protocol UDP Any TCP Any 200 Any 800 22 – 85 Items per page: 10 | 1 of 4 of 4 items 1 of 1 pages 1 Search Add ruleEdit rulesRefresh Outbound rules Save Save Cancel Cancel Save Cancel From: 20 To: 8051 From: To:20 8051 Rules Attached Interfaces (105603…smith)Catalog Docs Support ManageIBM Cloud Search
  8. 8. 9 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Complexity of new pattern was inaccessible via keyboard navigation Needed to use a lot of ARIA tags to compensate for accessibility issues Reading high level information required a lot
 of steps Accessibility Issues
 Discovered with JAWS All security groups ActiveSecuritygroupname Id: 4d528a48-a620-11e8-98d0-529269fb1459 5 rules remaining 2 interfaces remaining|| Refresh Items per page: 10 | 1 of 10 of 11 items 1 of Protocol UDP TCP Any UDP TCP Any ICMP Any TCP Any Value Any 22 – 80 Any 8001 – 8051 Type: 5, Code: 10 Any 800 22 – 85 Source 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 CIDR Block Security Group CIDR Block Inbound rules ValueDestination Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Protocol UDP Any TCP Any 200 Any 800 22 – 85 Items per page: 10 | 1 of 4 of 4 items 1 of Search Refresh Outbound rules From: 20 To: 8051 From: To:20 8051 Rules Attached Interfaces Search
  9. 9. © 2019 IBM Corporation What does it mean to be accessible? 10
  10. 10. © 2019 IBM Corporation The ability of everyone, regardless of disability or impairment, to have access to something. 11
  11. 11. 12 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Why is accessibility important to IBM? • Save time and money by solving accessibility issues before the development team puts design into code. • Provide for a better user experience for those who live with vision impairments, which would target current users and attract potential customers. • Secure government contracts.
  12. 12. 13 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Meet Randy! Randy Horwitz Development Manager Cloud Innovation lab
  13. 13. 14 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  14. 14. 15 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Take Snapshot All security groups ActiveSecuritygroupname Id: 4d528a48-a620-11e8-98d0-529269fb1459 5 rules remaining 2 interfaces remaining|| Add ruleEdit rulesRefresh Items per page: 10 | 1 of 10 of 11 items 1 of 2 pages 1 Protocol UDP TCP Any UDP TCP Any ICMP Any TCP Any Value Any 22 – 80 Any 8001 – 8051 Type: 5, Code: 10 Any 800 22 – 85 Source 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 CIDR Block Security Group CIDR Block Inbound rules ValueDestination Allow_FTP 99.99.99.0/30 101.40.56.0/24 162.244.78.12/24 Protocol UDP Any TCP Any 200 Any 800 22 – 85 Items per page: 10 | 1 of 4 of 4 items 1 of 1 pages 1 Search Add ruleEdit rulesRefresh Outbound rules Save Save Cancel Cancel Save Cancel From: 20 To: 8051 From: To:20 8051 Rules Attached Interfaces (105603…smith)Catalog Docs Support ManageIBM Cloud Search
  15. 15. 16 IBM Design Thinking
 (in a nutshell) • Focus on users and their needs • Treat everything as a prototype • Co-create with diverse teams Enterprise Design ThinkingIBM IBM Confidential / © 2019 IBM Corporation
  16. 16. 17 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  17. 17. 18 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Problem Statement How can we better incorporate accessibility
 into the design process so we can enable teammates with visual impairments to provide actionable feedback earlier in the process?
  18. 18. 19 IBM Personas
  19. 19. 20 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking • Has a background in web development and now works on a team of developers for CloudLand, a cloud computing company. • Lives with vision impairment and is assisted by a guide dog. • Accessibility advocacy is not his primary responsibility. • Uses screen readers to give feedback to devs and design teams. Martin, Developer Manager
  20. 20. 21 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking • UX designer at CloudLand. • Creates wireframes and Invision prototypes to explain interactions to her development teams. • Prototypes are tested on a variety of participants, but generally limited to point-and- click interactions. Desi, Designer
  21. 21. 22 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking • Front-end developer at CloudLand. • Iterates with Desi and the design team to create coded, production level, experiences. • Primary concerns are around a release being functional and accurate to designs. Tonya, Developer
  22. 22. 23 IBM As-is
  23. 23. 24 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  24. 24. 25 IBM Pain Points
  25. 25. © 2019 IBM Corporation Martin cannot give feedback until later stages of development, meaning his input often goes unaddressed. 26
  26. 26. Desi cannot get Martin’s feedback on accessibility because her designs must be coded before he can use a screen reader to evaluate them. 27© 2019 IBM Corporation
  27. 27. Developers have to spend significant time refactoring designs to account for accessibility issues. 28© 2019 IBM Corporation
  28. 28. 29 IBM Our goal
  29. 29. 30 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Engage with wireframes before they ever became live code.
  30. 30. 31 IBM Research
  31. 31. 32 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Other solutions • Developed prototypes • Stark • A11Y Project • W3C Guidelines • IBM Accessibility team Sketch plugin [in-progress]
  32. 32. 33 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  33. 33. 34 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  34. 34. 35 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  35. 35. 36 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  36. 36. 37 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Solutions in a physical space • Embossers • 3D Printing • Raised line drawing kits
  37. 37. 38 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  38. 38. 39 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  39. 39. 40 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Enable users to iterate quickly in a tactile, accessible medium.
  40. 40. 41 IBM Phase 1 Material exploration
  41. 41. 42 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking • Easy for us work with • Randy could identify • Reusable materials • Durable material • Inexpensive Needs
  42. 42. 43 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  43. 43. 44 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  44. 44. 45 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  45. 45. 46 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  46. 46. 47 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  47. 47. 48 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Takeaways • Foam shapes, hot glue, felt, and textured tape were really easy to work with and we could iterate with them quickly. They helped communicate interactions on a larger scale. • The raised line drawing pad was good for drawing micro details and interactions.
  48. 48. 49 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Next Steps • Use these materials to create a pattern library.
  49. 49. 50 IBM Phase 2
 Creating a pattern library
  50. 50. 51 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  51. 51. 52 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  52. 52. 53 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  53. 53. 54 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  54. 54. 55 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  55. 55. 56 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Takeaways • The pattern library made it easier for us to quickly create components and helped Randy to better consume. • The pattern library also allowed the three of us to keep consistency across our designs.
  56. 56. 57 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Next Steps • Reiterate next round of designs to allow kit to be reusable • Apply the updated pattern library and kit to test out WIP designs with the development team
  57. 57. 58 IBM Phase 3
 Using the kit
  58. 58. 59 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  59. 59. 60 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  60. 60. 61 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  61. 61. 65 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  62. 62. 66 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  63. 63. “I feel like I’m finally able to give useful feedback.” -Randy 67
  64. 64. Feedback from table session 68 • Add breadcrumbs to help with way-finding. • Incorporate table info on side panel since it hides content on the page. • Work through delete interaction for a policy in the table.
  65. 65. 69
  66. 66. 70
  67. 67. Feedback from order summary design session 71 • Screen-readers can skip over a button if it is disabled. Recommends keeping buttons enabled for such a large CTA here (option 2).
 • Preference of being directed to specifically what is needing to be fixed through the use of anchor links (option 1).
  68. 68. 72 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Takeaways • Randy felt empowered to provide feedback early in the process. • The kit could be used to quickly assemble designs in a sustainable and reusable format, in advance or on the fly. • The whiteboard offered as a nice contrast in texture • Look into having a more portable whiteboard
  69. 69. 73 IBM Where do we go from here? ?
  70. 70. 74 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking
  71. 71. 75 IBM IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking We’re leaving our current “Make” phase and are re- entering “Reflect” and “Observe.” During this “version” of Reflect and Observe, we’re able to use the kit in more real design scenarios. This will help us continue improving and expanding the kit. We will also be able to measure its concrete value in making the design process more efficient and accessible for all players.
  72. 72. 76 IBM Nick Hahn + Jenny Lanier IBM Confidential / © 2019 IBM CorporationEnterprise Design Thinking Next steps • Continue to build the kit with additional components • Start testing the kit with other teams • Evangelize accessibility co-creation with other teams • Get additional feedback from those that are vision impaired
  73. 73. Thanks! Janelle Arita jarita@us.ibm.com Jenny Lanier jenny.lanier@us.ibm.com Steven Raden sgraden@us.ibm.com

×