Refactoring for Accessibility

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

04c8d2026273e27d74b003c18c3b8261?s=128

Kim Schlesinger

May 16, 2019
Tweet

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