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. 2.

    An accessibility refactor will improve your product and your codebase

    more effectively than a code-only refactor. @kimschles
  2. 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
  3. 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
  4. 19.

    Web Standards The World Wide Web Consortium Goal: Interoperability between

    different types of computers and browsers @kimschles
  5. 20.

    A short list of W3C Standards • HTML • CSS

    • DOM • XML • ARIA @kimschles
  6. 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
  7. 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
  8. 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
  9. 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
  10. 36.
  11. 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
  12. 38.

    .skipnav-item { border: 0; clip: rect(0, 0, 0, 0); height:

    1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } @kimschles
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 49.

    An accessibility refactor will improve your product and your codebase

    more effectively than a code-only refactor. @kimschles
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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