Web Accessibility: It Doesn't Have to Be Hard

Talk at Google Developer Experts Summit and World Usability Day

Transcript

1. Web Accessibility:
   It doesn’t have to be hard
   World Usability Day
   Lagos, 2017
   

   View Slide

2. Ire Aderinokun
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Why is
   Accessibility Important?
   

   View Slide

7. View Slide

8. 1. Accessible Site’s are
   Great for Everyone
   

   View Slide

9. Who are you building
   your site for?
   

   View Slide

10. “Abled” or “Disabled”?
    

    View Slide

11. View Slide

12. ???
    

    View Slide

13. View Slide

14. Temporary and Situational
    Disabilities
    

    View Slide

15. Vision
    “Abled” Temporarily Disabled
    Situationally Disabled “Disabled”
    

    View Slide

16. Hearing
    “Abled” Temporarily Disabled
    Situationally Disabled “Disabled”
    

    View Slide

17. View Slide

18. 2. The web, by default,
    is Accessible
    

    View Slide

19. View Slide

20. http://motherfuckingwebsite.com
    

    View Slide

21. #UseThePlatform
    
    
    
    
    
    
    

    View Slide

22. Using a
    
    Open Modal
    
    

    View Slide

23. What you get for free
    • Focusable via the keyboard or screen reader
    • Clickable by mouse, enter key and space bar
    • Accessible name and state provided to assistive tech
    • An interaction is expected when clicked
    

    View Slide

24. View Slide

25. Using a
    
    Open Modal
    
    

    View Slide

26. Extra Work
    tabindex=“0”
    role=“button”
    onKeyPress=“handleBtnKeyPress(e)”
    onClick=“openModal(e)”>
    Open Modal
    
    

    View Slide

27. More Extra Work
    function handleBtnKeyPress(e) {
    // Check to see if space or enter were pressed
    if ( e.keyCode === 32 || e.keyCode === 13) {
    // Open modal dialog
    openModal(e);
    }
    }
    Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
    

    View Slide

28. Even More Extra Work
    [role=“button”] {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    margin: 0em;
    font: 11px system-ui;
    -webkit-appearance: button;
    }
    

    View Slide

29. View Slide

30. – A Wise Person on Twitter
    “HTML is, by default, accessible. As developers, it is
    our job to not fuck that up.”
    

    View Slide

31. 3. The web is for everyone
    

    View Slide

32. View Slide

33. http://www.euractiv.com/section/digital/opinion/web-
    accessibility-will-now-be-the-law-of-the-land-in-europe/
    

    View Slide

34. – Dita Charanzová
    “This is a victory not only for persons with
    disabilities, but all of us”
    

    View Slide

35. 4. It doesn’t have to be hard
    

    View Slide

36. 
    Open Modal
    
    
    Open Modal
    
    Accessible vs Inaccessible
    

    View Slide

37. How Do I Get Started
    With Accessibility?
    

    View Slide

38. View Slide

39. https://www.w3.org/TR/WCAG20
    https://www.w3.org/TR/WCAG20
    

    View Slide

40. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies
    

    View Slide

41. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies
    

    View Slide

42. alt=“Ire Aderinokun
    Illustration”>
    Text Alternatives
    

    View Slide

43. Contrast Ratio
    http://leaverou.github.io/contrast-ratio
    

    View Slide

44. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies
    

    View Slide

45. Keyboard Accessible
    

    View Slide

46. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies
    

    View Slide

47. Specify Language
    
    

    View Slide

48. Provide Instructions
    

    View Slide

49. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies
    

    View Slide

50. Write Valid Code
    
    
    
    
    My Web Page
    
    
    My Web Page
    
    
    

    View Slide

51. Label Elements
    
    Username
    
    type=“text”>
    
    X
    
    

    View Slide

52. View Slide

53. Lighthouse
    

    View Slide

54. Chrome Developer Tools > Audits > Perform an Audit
    

    View Slide

55. pa11y
    

    View Slide

56. View Slide

57. On-the-Fly
    Accessibility Testing
    

    View Slide

58. npm install -g pa11y
    pa11y example.com
    

    View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. Continuous Integration
    

    View Slide

66. View Slide

67. View Slide

68. npm install -g pa11y-ci
    pa11y-ci
    

    View Slide

69. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to test@test.com”,
    “click element #subscribe”,
    ]
    }
    }
    .pa11yci
    

    View Slide

70. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to test@test.com”,
    “click element #subscribe”,
    ]
    }
    }
    

    View Slide

71. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to test@test.com”,
    “click element #subscribe”,
    ]
    }
    }
    

    View Slide

72. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to test@test.com”,
    “click element #subscribe”,
    ]
    }
    }
    

    View Slide

73. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to test@test.com”,
    “click element #subscribe”,
    ]
    }
    }
    

    View Slide

74. pa11y-ci
    

    View Slide

75. pa11y-ci --threshold 50
    

    View Slide

76. https://bitsofco.de/pa11y
    https://github.com/ireade/bitsofcode-pa11y
    

    View Slide

77. Chrome Extensions
    

    View Slide

78. Alix
    https://github.com/ireade/alix
    

    View Slide

79. View Slide

80. Accessibility Developer Tools
    https://chrome.google.com/webstore/detail/
    accessibility-developer-t/
    fpkknkljclfencbdbgkenhalefipecmb
    

    View Slide

81. Inspect Element > Accessibility Properties
    

    View Slide

82. Inspect Element > Accessibility Properties
    

    View Slide

83. HTML5 Outliner
    https://chrome.google.com/webstore/detail/
    html5-outliner/
    afoibpobokebhgfnknfndkgemglggomo/
    reviews
    

    View Slide

84. View Slide

85. No Coffee
    https://accessgarage.wordpress.com/
    2013/02/09/458/
    

    View Slide

86. View Slide

87. User Research
    

    View Slide

88. https://www.youtube.com/watch?v=d3VuWAdBq9g
    

    View Slide

89. Test it Yourself!
    

    View Slide

90. Go Keyboard-Only
    

    View Slide

91. Try a Screen Reader
    

    View Slide

92. System Preferences > Accessibility > VoiceOver > “Enable VoiceOver”
    

    View Slide

93. https://www.chromevox.com
    

    View Slide

94. Screen Reader Demo
    

    View Slide

95. How Can I Make
    Accessibility Easy?
    

    View Slide

96. View Slide

97. Make Accessibility a
    First Class Citizen
    

    View Slide

98. Make Accessibility
    Everyone’s Job
    

    View Slide

99. http://accessibility.voxmedia.com
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. View Slide

105. Accessibility is only
     hard when you do it
     last
     

     View Slide

106. – Leonie Watson
     “Accessibility doesn't have to be perfect, it just
     needs to be a little bit better than yesterday.”
     

     View Slide

107. Thank You!
     @IreAderinokun
     www.ireaderinokun.com
     

     View Slide