Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  2. An accessibility refactor will
    improve your product and your
    codebase more effectively than a
    code-only refactor.
    @kimschles

    View full-size slide

  3. Kim
    Schlesinger
    Ops, Education &
    Software
    @kimschles

    View full-size slide

  4. Roadmap
    1. Why
    2. What
    3. How
    @kimschles

    View full-size slide

  5. The Why
    @kimschles

    View full-size slide

  6. I thought I knew more than I did...
    @kimschles

    View full-size slide

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

    View full-size slide

  8. WebAIM Million
    97.8% of home pages had detectable WCAG 2 failures
    @kimschles

    View full-size slide

  9. 2.2% of home pages had no
    WCAG 2 failures
    @kimschles

    View full-size slide

  10. The What
    @kimschles

    View full-size slide

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

    View full-size slide

  12. Question: How do we
    know when something is
    accessible and when it's
    not?
    @kimschles

    View full-size slide

  13. Answer: STANDARDS
    @kimschles

    View full-size slide

  14. Web Standards
    The World Wide Web Consortium
    Goal: Interoperability between different types of computers
    and browsers
    @kimschles

    View full-size slide

  15. A short list of W3C Standards
    • HTML
    • CSS
    • DOM
    • XML
    • ARIA
    @kimschles

    View full-size slide

  16. WCAG
    Web Content Accessibility
    Guidelines
    Versions 2.0 and 2.1
    @kimschles

    View full-size slide

  17. POUR
    Perceivable
    Operable
    Understandable
    Robust
    @kimschles

    View full-size slide

  18. WCAG 2.0 Guidelines
    @kimschles

    View full-size slide

  19. Other standards or guidelines
    • Section 508
    @kimschles

    View full-size slide

  20. The How
    @kimschles

    View full-size slide

  21. 1. Use multiple tools to identify
    accessibility issues
    @kimschles

    View full-size slide

  22. WAVE Extension
    @kimschles

    View full-size slide

  23. alt text
    @kimschles

    View full-size slide

  24. Before
    const CompanyProfileCard = (props : Props) => (






    @kimschles

    View full-size slide

  25. Before
    const CompanyProfileCard = (props : Props) => (






    @kimschles

    View full-size slide

  26. After
    const CompanyProfileCard = (props : Props) => (






    @kimschles

    View full-size slide

  27. Use JS template literals to
    dynamically populate alt text for
    images.
    @kimschles

    View full-size slide

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

    View full-size slide

  29. Provide a “Skip to main
    content” link
    @kimschles

    View full-size slide

  30. Add the skip nav code, or component, to the
    top of your header
    @kimschles

    View full-size slide

  31. import React from 'react';
    const SkipNav = () => (


    Skip to Main Content


    Accessibility Statement


    );
    export default SkipNav;
    @kimschles

    View full-size slide

  32. .skipnav-item {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    }
    @kimschles

    View full-size slide

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

    View full-size slide

  34. 1. Use multiple tools to
    identify issues
    @kimschles

    View full-size slide

  35. 2. Commit to accessibility being
    an ongoing process, not a one
    time fix
    @kimschles

    View full-size slide

  36. Accessibility Statement
    @kimschles

    View full-size slide

  37. import React from 'react';
    const SkipNav = () => (


    Skip to Main Content


    Accessibility Statement


    );
    export default SkipNav;
    @kimschles

    View full-size slide

  38. import React from 'react';
    const SkipNav = () => (


    Skip to Main Content


    Accessibility Statement


    );
    export default SkipNav;
    @kimschles

    View full-size slide

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

    View full-size slide

  40. Examples
    • diversity Accessibility Statement
    • Eric Bailey Accessibility Statement
    @kimschles

    View full-size slide

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

    View full-size slide

  42. An accessibility refactor will
    improve your product and your
    codebase more effectively than a
    code-only refactor.
    @kimschles

    View full-size slide

  43. What Can I
    Do?
    @kimschles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Everyone
    • Attend the the Front Range Accessibility and Inclusive Design
    Meetup in Boulder!
    • Subscribe to the A11y Weekly Newsletter
    • Come to Develop Denver!
    @kimschles

    View full-size slide

  47. Recap
    1. Why
    2. What
    3. How
    @kimschles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  50. Questions
    @kimschles

    View full-size slide

  51. Contact Me
    kimschlesinger.com
    developdenver.org
    hirediversity.us
    @kimschles
    on twitter, github and twitch
    @kimschles

    View full-size slide