$30 off During Our Annual Pro Sale. View details »

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

Kim Schlesinger

May 16, 2019
Tweet

More Decks by Kim Schlesinger

Other Decks in Technology

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