Auditing Design Systems for Accessibility - Anna E. Cook
•
0 likes•51 views
The document discusses auditing design systems for accessibility. It begins by explaining how design systems can proliferate both accessibility issues and fixes if accessibility is considered. It then covers conducting accessibility audits, which involve using the WCAG as criteria to manually and automatically test components for various issues. The audit process involves planning, reviewing designs, code and documentation, documenting any issues found, grouping by theme, prioritizing by impact, and sharing results. Accessibility auditing is presented as a way for teams to advocate for and improve accessibility in their design systems.
Report
Share
Auditing Design Systems for Accessibility - Anna E. Cook
- 2. Hi, I’m Anna! Pronouns are She/They • Senior Designer at Microsoft working on accessibility and inclusive design for Azure and beyond • Earned an MS in Creative Technology + Design, University of Colorado Boulder College of Engineering and Applied Science 3
- 3. Have you faced challenges when advocating for accessibility in your design systems? 🙋 4
- 4. What we will discuss Today’s Goal: to give you tools to advocate for better design system accessibility 1. Basics - Design systems and accessibility 2. Understanding – Accessibility audits 3. Process - Auditing design systems 5
- 6. Design systems are essential because they create more accessible products at scale. 7
- 7. Atoms Molecules Organisms Templates & Pages 8
- 8. What happens when our design system fails to consider accessibility? 9
- 9. WCAG 2.5.3 Label in Name - Level A No icon button label provided (visually or programmatically) 10
- 10. WCAG 3.3.2 Labels or Instructions - Level A No form instructions have been provided. None of the form fields have required indicators. 11
- 11. WCAG 1.4.11 Non-text Contrast - Level AA The form fields have low contrast borders, users may struggle to select the field (current contrast ratio is 1.48 to 1). 12
- 12. WCAG 1.4.3 Contrast (Minimum) Level AA The color contrast on the button is too low, people will struggle to read it (current contrast ratio is 2.38 to 1). 13
- 13. This issue affects other components 14
- 14. Accessibility issues in a design system proliferate 15
- 15. Accessibility fixes in a design system also proliferate 16
- 16. Accessible design systems empower teams to build more inclusive products 17
- 18. Accessibility audits are one way to find and log accessibility issues in so we can document them and fix them 🕵 19
- 19. Use WCAG to as assessment criteria for design system audit 20
- 20. The WCAG Quick Reference guide will help you know what to look for and why 21
- 21. Review for A and AA accessibility levels A-levels are the method WCAG applies to levels of compliance, with A and AA being required. 22
- 22. Two audit evaluation methods 🤖 Automated testing ⌨ Manual testing 23
- 24. Plan the audit • Accessibility Level: A, AA, AAA? • Goals: Objectives of audit? • Timeline: How long will you need? • Team: Who should be involved? • Process: Automated testing, manual testing, or both? • Scope: What components and patterns will be reviewed? 25
- 25. What can be reviewed in your audit Designs Code Docs 26
- 26. Reviewing designs Use WCAG Quick Reference and Plugins to manually review design files. 27
- 27. Reviewing code Code review should be done using both automated and manual evaluation methods. 28
- 28. Reviewing system documentation Even a perfectly accessible design system can be broken if used incorrectly. 29
- 30. Capturing issues • Component with issue • Description of issue • Testing Method (auto, manual) • WCAG Criteria related to issue • Conformance Level (A, AA, AAA) • Date issue was captured • Links (where issue was found) • Recommendations to fix issue • Impact of issue (low, med, high) • Common themes (ex: contrast) 31
- 31. Group issues into common themes 32
- 32. Prioritize issues by impact • Impact on users – how significant of a barrier is created with this issue? • Impact on organization – does the component get used in essential interactions (example: login)? • Impact by usage – how often is this component used across products? 33
- 33. Share the results After the audit is complete, share results with key team members and leadership. 8% Minor 34% Critical 58% High 34
- 34. Accessibility auditing cannot replace feedback from users with disabilities. 35
- 35. Prioritize inclusive research and design Gather direct feedback from disabled users about your product. • Work with organizations such as Fable to bring in disabled testers • Leverage ERGs while ensuring they are properly compensated and recognized for their work 36
- 36. Want to learn more? 👩🏫 Join my workshop later today 💻 Watch the course LinkedIn Learning 37
- 37. Thank you! Let’s Connect. Follow me at @AnnaECook on LinkedIn, Mastodon, or Bluesky 38
- 38. Sources • All slides reference works written by Anna E. Cook in prior publications including… • LinkedIn Learning linkedin.com/learning/auditing-design-systems-for- accessibility • Deque deque.com/blog/auditing-design-systems-for-accessibility • Slide 8: Atomic Design by Brad Frost atomicdesign.bradfrost.com • Slide 21: WCAG Quick Reference Guide w3.org/WAI/WCAG22/quickref/ • Slide 28: Deque axe deque.com/axe • Slide 29: Carbon Design System carbondesignsystem.com 39