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
   

   View Slide

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

   View Slide

3. Kim
   Schlesinger
   Ops, Education &
   Software
   @kimschles
   

   View Slide

4. @kimschles
   

   View Slide

5. @kimschles
   

   View Slide

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

   View Slide

7. The Why
   @kimschles
   

   View Slide

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

   View Slide

9. @kimschles
   

   View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

13. !
    @kimschles
    

    View Slide

14. The What
    @kimschles
    

    View Slide

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
    

    View Slide

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

    View Slide

17. Answer: STANDARDS
    @kimschles
    

    View Slide

18. @kimschles
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. POUR
    Perceivable
    Operable
    Understandable
    Robust
    @kimschles
    

    View Slide

23. WCAG 2.0 Guidelines
    @kimschles
    

    View Slide

24. @kimschles
    

    View Slide

25. Other standards or guidelines
    • Section 508
    @kimschles
    

    View Slide

26. The How
    @kimschles
    

    View Slide

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

    View Slide

28. WAVE Extension
    @kimschles
    

    View Slide

29. alt text
    @kimschles
    

    View Slide

30. Before
    const CompanyProfileCard = (props : Props) => (
    
    
    
    
    
    
    @kimschles
    

    View Slide

31. Before
    const CompanyProfileCard = (props : Props) => (
    
    
    
    
    
    
    @kimschles
    

    View Slide

32. After
    const CompanyProfileCard = (props : Props) => (
    
    
    
    
    
    
    @kimschles
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

37. import React from 'react';
    const SkipNav = () => (
    
    
    Skip to Main Content
    
    
    Accessibility Statement
    
    
    );
    export default SkipNav;
    @kimschles
    

    View Slide

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

    View Slide

39. 
    @kimschles
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

43. Accessibility Statement
    @kimschles
    

    View Slide

44. import React from 'react';
    const SkipNav = () => (
    
    
    Skip to Main Content
    
    
    Accessibility Statement
    
    
    );
    export default SkipNav;
    @kimschles
    

    View Slide

45. import React from 'react';
    const SkipNav = () => (
    
    
    Skip to Main Content
    
    
    Accessibility Statement
    
    
    );
    export default SkipNav;
    @kimschles
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

50. What Can I
    Do?
    @kimschles
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

57. Questions
    @kimschles
    

    View Slide

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

    View Slide