Refactoring for Accessibility

During the last year, I led a small team of developers to build the platform for hirediversity.us. In order to launch our product quickly, we took a lot of shortcuts and accrued a lot of tech debt. I stepped down from diversity at the end of March 2019, and during my last month at the company, I refactored the codebase. I discovered that for us, working on an accessibility-related refactor was more important than a pure code refactor.

During this talk, I will cover:
• Which audit tools you can use to identify accessibility-related issues
• Why your engineering organization should commit to accessibility being an ongoing process

Transcript

1. Refactoring for Accessibility Kim Schlesinger Denver Node.js Meetup - May 2019 @kimschles
2. An accessibility refactor will improve your product and your codebase more effectively than a code-only refactor. @kimschles
3. Kim Schlesinger Ops, Education & Software @kimschles
4. @kimschles
5. @kimschles
6. Roadmap 1. Why 2. What 3. How @kimschles
7. The Why @kimschles
8. I thought I knew more than I did... @kimschles
9. @kimschles
10. Dunning-Kruger Effect is a psychological phenomenon in which people of the lowest ability in a subject rate themselves as most competent compared to others. -- Hubspot @kimschles
11. WebAIM Million 97.8% of home pages had detectable WCAG 2 failures @kimschles
12. 2.2% of home pages had no WCAG 2 failures @kimschles
13. ! @kimschles
14. The What @kimschles
15. What is accessibility? Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. --WC3 Web Accessibility Initiative @kimschles
16. Question: How do we know when something is accessible and when it's not? @kimschles
17. Answer: STANDARDS @kimschles
18. @kimschles
19. Web Standards The World Wide Web Consortium Goal: Interoperability between different types of computers and browsers @kimschles
20. A short list of W3C Standards • HTML • CSS • DOM • XML • ARIA @kimschles
21. WCAG Web Content Accessibility Guidelines Versions 2.0 and 2.1 @kimschles
22. POUR Perceivable Operable Understandable Robust @kimschles
23. WCAG 2.0 Guidelines @kimschles
24. @kimschles
25. Other standards or guidelines • Section 508 @kimschles
26. The How @kimschles
27. 1. Use multiple tools to identify accessibility issues @kimschles
28. WAVE Extension @kimschles
29. alt text @kimschles
30. Before const CompanyProfileCard = (props : Props) => ( <CustomCard onClick={props.onClick}> <Media left> <Link to={`/company/${props.id}`}> <Media object src={props.logo} width="100" alt="Logo"/> </Link> </Media> @kimschles
31. Before const CompanyProfileCard = (props : Props) => ( <CustomCard onClick={props.onClick}> <Media left> <Link to={`/company/${props.id}`}> <Media object src={props.logo} width="100" alt="Logo"/> </Link> </Media> @kimschles
32. After const CompanyProfileCard = (props : Props) => ( <CustomCard onClick={props.onClick}> <Media left> <Link to={`/company/${props.id}`}> <Media object src={props.logo} width="100" alt={`${props.name} logo`}/> </Link> </Media> @kimschles
33. Use JS template literals to dynamically populate alt text for images. @kimschles
34. Checklists, Exemplars and Screenreaders • A11y Checklist • Good examples you can deconstruct • The A11y Project • Eric Bailey Design • Inclusive Design Principles • Manual Testing with a Screen Reader @kimschles
35. Provide a “Skip to main content” link @kimschles
36. Add the skip nav code, or component, to the top of your header @kimschles
37. import React from 'react'; const SkipNav = () => ( <ul id="section-skipnav" aria-label="Skipnav" role="navigation"> <li className="skipnav-item"> <a href="#section-main">Skip to Main Content</a> </li> <li class="skipnav-item"> <a href="/accessibility-statement">Accessibility Statement</a> </li> </ul> ); export default SkipNav; @kimschles
38. .skipnav-item { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } @kimschles
39. <main id="section-main"> @kimschles
40. Skip Navigation Links • Create a way for people using screen readers to skip to the main content of the page • If you're using a JS framework, make this a component you can easily reuse @kimschles
41. 1. Use multiple tools to identify issues @kimschles
42. 2. Commit to accessibility being an ongoing process, not a one time fix @kimschles
43. Accessibility Statement @kimschles
44. import React from 'react'; const SkipNav = () => ( <ul id="section-skipnav" aria-label="Skipnav" role="navigation"> <li className="skipnav-item"> <a href="#section-main">Skip to Main Content</a> </li> <li class="skipnav-item"> <a href="/accessibility-statement">Accessibility Statement</a> </li> </ul> ); export default SkipNav; @kimschles
45. import React from 'react'; const SkipNav = () => ( <ul id="section-skipnav" aria-label="Skipnav" role="navigation"> <li className="skipnav-item"> <a href="#section-main">Skip to Main Content</a> </li> <li class="skipnav-item"> <a href="/accessibility-statement">Accessibility Statement</a> </li> </ul> ); export default SkipNav; @kimschles
46. Why? • Show your users that you care about accessibility and about them • Provide them with information about the accessibility of your content • Demonstrate commitment to accessibility, and to social responsibility -- W3C Web Accessibility Initiative @kimschles
47. Examples • diversity Accessibility Statement • Eric Bailey Accessibility Statement @kimschles
48. Accessibility Statement • Include an accessibility statement to state your intentions, your known accessibility issues and how to contact someone if there are barriers to access • Continue working on making your site accessible, and update your statement as needed @kimschles
49. An accessibility refactor will improve your product and your codebase more effectively than a code-only refactor. @kimschles
50. What Can I Do? @kimschles
51. If you work at a company • Find ways to discuss accessibility with people in positions of leadership • Offer to lead a lunch and learn on the topic @kimschles
52. If you're in school • Ask your instructor when you'll be covering accessibility in the curriculum. • If it will not be covered, respectfully ask 'why not?' • Give a lightning talk or lesson about the topic @kimschles
53. Everyone • Attend the the Front Range Accessibility and Inclusive Design Meetup in Boulder! • Subscribe to the A11y Weekly Newsletter • Come to Develop Denver! @kimschles
54. Recap 1. Why 2. What 3. How @kimschles
55. How 1. Use multiple tools to identify issues 2. Commit to accessibility being an ongoing process, not a one time fix 3. Insist that developing accessible applications is core to your organization @kimschles
56. Accessibility Resources • Wave Web Accessibility Evaluation System • a11y Web Accessibility Checklist • Inclusive Design Principles • Eric Bailey: Fighting Uphill • Crystal Preston-Watson Demystifying Accessibility Talk @kimschles
57. Questions @kimschles
58. Contact Me kimschlesinger.com developdenver.org hirediversity.us @kimschles on twitter, github and twitch @kimschles