Optimizing a11y-remediation-process-tierney-chen
Download as PPTX, PDF0 likes225 views
The document discusses the challenges and strategies of optimizing accessibility remediation processes within large organizations, particularly focusing on the roles of various stakeholders involved. It highlights specific accessibility issues, such as incorrect alt text and insufficient color contrast, and offers proposed solutions while addressing the complexities of implementation due to multiple contributors and organizational layers. Emphasizing the importance of collaboration, the document also examines the effort and resources required to remediate accessibility problems effectively.
Optimizing a11y-remediation-process-tierney-chen
- 1. Optimizing the Accessibility Remediation Process in Large Organizations Aidan Tierney, atierney@ca.ibm.com Richard Chen, chenr@us.ibm.com March 20, 2014 IBM Interactive Experience © 2014 IBM Corporation
- 2. Accessibility remediation in a large organization WHAT are the accessibility problems and the potential solutions?
- 3. Accessibility remediation in a large organization WHAT are the accessibility problems and the potential solutions? WHO will contribute to solution in a large organization? HOW to address some of the issues
- 4. Aidan Tierney Senior Accessibility Consultant, IBM Interactive Experience IBM Interactive Experience Richard Chen User Research and Design Senior Consultant, IBM Interactive Experience Who’s here?
- 5. Who’s here? WHO are you? What’s your name? WHAT do you do related to accessibility? What role(s) do you perform? Developer Designer Tester Project manager Policy / compliance Legal Accessibility Consultant Marketing WHERE do you do this? Your organization: federal govt., education, startup, large company.
- 6. Accessibility Program Manager In a department of one Experienced in accessibility, development and design Recent hire Let’s meet Julia
- 7. Julia works at Colossal Corporation
- 8. Online Account Application is not Accessible Customer complaints Senior management decided application must conform to WCAG Level A and AA
- 9. Julia does accessibility assessment Syntax checking tool Manual checks – e.g. Color contrast Assistive technology – Screen reader Assess
- 10. WHAT are the accessibility problems? WHAT are the potential solutions?
- 11. Issue: Incorrect ALT text <img alt="logo-file-C62" src="logo.png" />
- 12. Issue: Insufficient color contrast
- 13. Issue: Image of text
- 14. Issue: No indication for required fields
- 16. <alt%!> Solution: ALT text <img alt="Colossal Corporation" src="logo.png" />
- 17. Cc Solution: Color contrast New: #707070 Old: #a0a0a0 Observed: Code comes from SocialMedia iframe
- 18. Solution: Image of text Use HTML text and CSS, with system or web font font-family: comic sans ms; Insufficient contrast in original, new color needed
- 19. Solution: Required fields Required fields are marked with an asterisk (*) <input aria-required="true" type="text" /> Visual and programmatic indicator
- 21. If this was a form on her own personal website, Julia could make these fixes in an afternoon
- 22. But it’s not so simple at Colossal Corporation
- 24. Julia needs to find out WHO can… Nilesh tells Julia his team cannot make these changes
- 25. WHO will contribute to solutions in a large organization?
- 26. Application development team Code library/core components Content management (CMS) Application development team Code library/core components Content management (CMS) Who will make DEVELOPMENT changes?
- 27. Who manages relationships with 3RD PARTY code providers
- 28. Who from the BUSINESS will approve interface or functionality changes?
- 29. Who will decide, approve and make DESIGN changes?
- 30. Does LEGAL need to sign off?
- 31. Does BRANDING need to be in the loop?
- 32. Does the MARKETING team need to provide content?
- 33. Who will TEST?
- 34. And who from the LEADERSHIP team needs to be informed?
- 35. Accessibility project #1 More questions…
- 36. Who will decide which TOOLS to use for testing?
- 37. Who will decide which BROWSERS, DEVICES or USER AGENTS to support for accessibility?
- 38. Who will TRAIN testers and developers in accessibility tools and techniques?
- 39. Who will resolve different interpretations of WCAG?
- 40. Who will authorize EXCEPTIONS? Issues that cannot or will not be fixed?
- 41. Who will make DEVELOPMENT changes? Who manages relationships with 3RD PARTY CODE? Who from the BUSINESS will approve interface or functionality changes? Who will decide, approve and make DESIGN changes? Does LEGAL need to sign off? Does the MARKETING team need to provide content? Does BRANDING need to be in the loop? Who from the business LEADERSHIP team needs to be informed? Who will TEST? Who will decide which TOOLS to use for testing? Who will decide which BROWSERS, DEVICES or USER AGENTS to support for accessibility? Who will TRAIN testers and developers in accessibility tools and techniques? Who will resolve different INTERPRETATIONS OF WCAG? Who will authorize EXCEPTIONS?
- 43. And remember: If this was her own website, Julia could make these fixes in an afternoon!
- 44. Does this sound familiar to anyone? Have you run into these issues? Got any more to add?
- 45. Believe it or not: real world examples
- 46. <alt%!> Effort: ALT text 4 months duration (one image) 100+ person hours Meetings & discussions involving 30+ resources
- 47. Cc Effort: Color contrast 5 months duration 100+ person hours Meetings & discussions involving 30+ resources
- 48. Effort: Image of text 6 months duration 100+ person hours Meetings & discussions involving 20+ resources Not implemented
- 49. Effort: Required fields 4 months duration 200+ person hours Meetings & discussions involving 40+ resources Alternate solution used - legal objected to asterisk
- 50. HOW to manage the issues
- 51. Originates with Approved by Implemented by Consider the solution workflow Best to do consider this as early as possible
- 52. Originates with • Design guidelines Approved by • Legal • Business Implemented by • Code library • Application development Example workflow: required field solution Can do this for any of the proposed fixes
- 53. Teams and stakeholders Designers Design Guidelines Legal Marketing Branding Code library CMS Application dev. Business approvals Testing Senior leadership 3rd party code Exception process Tools Training Budgets
- 54. Factors of complexity List roadblocks to remediation Brainstorm! Based on previous experiences
- 56. Outside Leadership Legal Branding Influence Vendors Testing Tools Training Other development teams Design guidelines Control Development Design WCAG interpretation and fix User Agent and devices
- 57. Factors to think aboutFactors to think about Communication Understanding of accessibility Decision making Budget Technology versions
- 58. A method to bring order... Weighting Assign weights to each factor Percentages summing to 100% Issues by complexity
- 59. Factor Weight Vendors 5% Testing 20% Tools 10% Training 5% Other Dev’s 2% Design guides 3% Factor Weight Development 10% Design 15% WCAG 2% User Agent 3% Factor Weight Leadership 5% Legal 15% Branding 5%
- 60. Introspection Use weights to identify opportunities to improve efficiency Minimize barriers to design, development, and remediation
- 61. Values Assign values, e.g. 1 (low) to 3 (high) Two values to plot – X = severity Y = complexity Weights can fluctuate
- 62. Applying weighting to Colossal Corp.
- 63. Required Fields Factor Weight Value Weighted Development 10% 2 0.2 Design 15% 1 0.15 WCAG 2% 2 0.04 User Agent 3% 1 0.03 Vendors 5% 0 0 Testing 20% 3 0.6 Tools 10% 0 0 Training 5% 1 0.05 Other Dev’s 2% 1 0.02 Design guides 3% 3 0.09 Leadership 5% 1 0.05 Legal 15% 3 0.45 Branding 5% 0 0 Total 100% 1.68
- 64. Many pages affected Aria-required vs. asterisk In-house update, no impact Harder with aria-required High quantity High impact design changes Wording for directions Asterisk used as another symbol Required Fields Factor Weight Value Weighted Development 10% 2 0.2 Design 15% 1 0.15 WCAG 2% 2 0.04 User Agent 3% 1 0.03 Vendors 5% 0 0 Testing 20% 3 0.6 Tools 10% 0 0 Training 5% 1 0.05 Other Dev’s 2% 1 0.02 Design guides 3% 3 0.09 Leadership 5% 1 0.05 Legal 15% 3 0.45 Branding 5% 0 0 Total 100% 1.68
- 65. Contrast Development 10% 1 0.1 Design 15% 2 0.3 WCAG 2% 3 0.06 User Agent 3% 1 0 Vendors 5% 3 0.15 Testing 20% 3 0.6 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 1 0.02 Design guides 3% 3 0.09 Leadership 5% 1 0.05 Legal 15% 0 0 Branding 5% 2 0.1 Total 1.72 Alt Text from vendor Development 10% 1 0.1 Design 15% 0 0 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 3 0.15 Testing 20% 1 0.2 Tools 10% 1 0.1 Training 5% 2 0.1 Other Dev’s 2% 1 0.02 Design guides 3% 0 0 Leadership 5% 0 0 Legal 15% 2 0.3 Branding 5% 1 0.05 Total 1.07 Image of Text Development 10% 3 0.3 Design 15% 2 0.3 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 2 0.1 Testing 20% 2 0.4 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 2 0.04 Design guides 3% 3 0.09 Leadership 5% 2 0.1 Legal 15% 3 0.45 Branding 5% 2 0.1 Total 2.18
- 66. Contrast Weighted Values in detail Image of Test Development 10% 3 0.3 Design 15% 2 0.3 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 2 0.1 Testing 20% 2 0.4 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 2 0.04 Design guides 3% 3 0.09 Leadership 5% 2 0.1 Legal 15% 3 0.45 Branding 5% 2 0.1 Total 2.18 Alt Text from vendor Development 10% 1 0.1 Design 15% 0 0 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 3 0.15 Testing 20% 1 0.2 Tools 10% 1 0.1 Training 5% 2 0.1 Other Dev’s 2% 1 0.02 Design guides 3% 0 0 Leadership 5% 0 0 Legal 15% 2 0.3 Branding 5% 1 0.05 Total 1.07 Colors could be off-brand Defined ratio, but many affects many areas with different interpretation Logos, images branding, and text from vendors Negotiation, communication, updates Affects many design elements Easy fix to CSS files Contrast Development 10% 1 0.1 Design 15% 2 0.3 WCAG 2% 3 0.06 User Agent 3% 1 0 Vendors 5% 3 0.15 Testing 20% 3 0.6 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 1 0.02 Design guides 3% 3 0.09 Leadership 5% 1 0.05 Legal 15% 0 0 Branding 5% 2 0.1 Total 1.72
- 67. Image of Test Development 10% 3 0.3 Design 15% 2 0.3 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 2 0.1 Testing 20% 2 0.4 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 2 0.04 Design guides 3% 3 0.09 Leadership 5% 2 0.1 Legal 15% 3 0.45 Branding 5% 2 0.1 Total 2.18 Contrast Development 10% 1 0.1 Design 15% 2 0.3 WCAG 2% 3 0.06 User Agent 3% 1 0 Vendors 5% 3 0.15 Testing 20% 3 0.6 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 1 0.02 Design guides 3% 3 0.09 Leadership 5% 1 0.05 Legal 15% 0 0 Branding 5% 2 0.1 Total 1.72 Requires legal’s approval Training on meaningful alt text No design restraints need to sync code, should be easy Alt Text from vendor Development 10% 1 0.1 Design 15% 0 0 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 2 0.1 Testing 20% 1 0.2 Tools 10% 1 0.1 Training 5% 2 0.1 Other Dev’s 2% 1 0.02 Design guides 3% 0 0 Leadership 5% 0 0 Legal 15% 2 0.3 Branding 5% 1 0.05 Total 1
- 68. Alt Text from vendor Development 10% 1 0.1 Design 15% 0 0 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 3 0.15 Testing 20% 1 0.2 Tools 10% 1 0.1 Training 5% 2 0.1 Other Dev’s 2% 1 0.02 Design guides 3% 0 0 Leadership 5% 0 0 Legal 15% 2 0.3 Branding 5% 1 0.05 Total 1.07 Contrast Development 10% 1 0.1 Design 15% 2 0.3 WCAG 2% 3 0.06 User Agent 3% 1 0 Vendors 5% 3 0.15 Testing 20% 3 0.6 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 1 0.02 Design guides 3% 3 0.09 Leadership 5% 1 0.05 Legal 15% 0 0 Branding 5% 2 0.1 Total 1.72 Possibly complicated interpretation Discuss with and update other teams Identify images to test and procedure Regression testing Clear for Level AA Design decisions on live fonts and interaction Create live fonts Possible impact on responsive Image of Text Development 10% 3 0.3 Design 15% 2 0.3 WCAG 2% 1 0.02 User Agent 3% 1 0.03 Vendors 5% 2 0.1 Testing 20% 2 0.4 Tools 10% 1 0.1 Training 5% 3 0.15 Other Dev’s 2% 2 0.04 Design guides 3% 3 0.09 Leadership 5% 2 0.1 Legal 15% 3 0.45 Branding 5% 2 0.1 Total 2.18
- 69. More complexLess Complex More severe Less severe Image of text (2.4, 3) Contrast (1.72, 2.5) Asterisk (1.68, 2.2) Vendor Alt text (1, 1) Prioritizing Issues
- 70. More accurate estimation More objective choices More accurate project plan and timeline Julia’s at ease
- 71. What’s Next? …. Remediation How much is enough? Techniques: WCAG Level A vs. AA, 80-20, Agile, Cost impact, Traffic
- 72. Julia’s a Hero!
- 73. WHAT? WHO? HOW? In conclusion …
- 78. Aidan Tierney atierney@ca.ibm.com IBM Interactive Experience Richard Chen chenr@us.ibm.com Contact us! www.ibm.com/able
- 79. Thank you!
- 80. Time Topic – IBM Papers/Presentations/Panels Speaker/s Wednesday March 19th 9:20-10:20 Practical Mobile Accessibility in the Enterprise Tom Babinszki 10:40-11:40 Costing Accessibility Remediation for Acquisitions Becky Gibson 1:50-2:50 Implementing Accessibility in a Graphing Utility Fred Esch Thursday March 20th 9:20-10:20 Implementing Accessibility in an Enterprise Mobile Web User Interface Toolkit Tom Babinszki 10:40-11:40 Toward a Common Enterprise Accessibility Operational Model Bill Curtis-Davidson 1:50-2:50 Optimizing the Accessibility Remediation Process in Large Organizations Richard Chen, Aidan Tierney 3:10-4:10 Media Captioner, Translator and Editor – A Complete Collaborative Approach Kaoru Shinkawa Friday March 21st 9:20-10:20 Progress Report on the Global Public Inclusive Infrastructure (GPII) Denis Anson, Rich Schwerdtfeger, Jim Tobias, Gregg Vanderheiden 10:40-11:40 Accessible Design Thinking Mary Jo Mueller, Matt King 1:50-2:50 W3C Cognitive Accessibility Task Force Panel Judy Brewer, Rich Schwerdtfeger, Susann Keohane, Lisa Seeman, Clayton Lewis, Suzanne Taylor IBM at CSUN 2014 – you’re invited Join IBM in Harbor Ballroom A to learn about the latest in accessible user interface design, mobile accessibility, accessibility risk and compliance management, and much more. © 2014 IBM Corporation
- 81. Image attributions creativecommons.org/ Chris Blakeley: A portrait of the artist as a Cube Phil Whitehouse: New Office Dell #Inspire House Dell. Elevating women and girls Gokyo Ri: Western side of Mount Everest Herval: Cubicle Life Jason Scragzs: Bored Paco Olvera Monterd: Office Alex E. Proimos: Caïn venant de tuer son frère Abel, by Henry Vidal in Tuileries Garden Nick Holland: Arm wrestling social media icons manicxminer : concentric circles shirt