How to prevent the collapse of society by building an accessible web

It’s 2031. Society, as we knew it in 2021, has officially collapsed. Broken hardware and a very slow internet connection are all we have left.

Accessibility on the web is now paramount to the survival of the human race.

But how do you ensure your website is accessible amidst a raging apocalypse? How do you get your website "apocalypse ready?"

Join whitep4nth3r to explore why only the most accessible and inclusive websites will survive an apocalypse, how you can utilise free tools to ensure you are building for the apocalypse, and why all of this is more important than ever now, in 2021.

Transcript

1. Salma Alam-Naylor
   @whitep4nth3r
   HOW TO PREVENT THE
   COLLAPSE OF SOCIETY
   BY BUILDING AN
   ACCESSIBLE WEB.
   

   View Slide

2. @whitep4nth3r
   https://whitep4nth3r.com
   HI FRIENDS,
   I’M SALMA.
   I help developers build stuff,
   learn things, and love what they do.
   

   View Slide

3. I believe that life on Earth is at an ever-
   increasing risk of being wiped out by a
   disaster, such as a sudden nuclear war, a
   genetically engineered virus, or other dangers.
   Stephen Hawking
   

   View Slide

4. IT’S 2031.
   

   View Slide

5. The apocalypse has arrived.
   

   View Slide

6. The internet is running
   on a slow 3G connection.
   

   View Slide

7. Display screens are broken.
   The internet is running
   on a slow 3G connection.
   

   View Slide

8. View Slide

9. Accessibility on the web is paramount
   to the survival of the human race.
   

   View Slide

10. How do we prepare the web
    for the apocalypse of 2031?
    

    View Slide

11. And why is this important, now?
    How do we prepare the web
    for the apocalypse of 2031?
    

    View Slide

12. ACCESSIBILITY FOR SLOW
    CONNECTIONS.
    

    View Slide

13. Websites
    100%
    There are almost 2 billion
    websites in the world*.
    *https://www.internetlivestats.com/total-number-of-websites
    

    View Slide

14. JS
    95%
    No JS
    5%
    There are almost 2 billion
    websites in the world*.
    95% of those websites use
    JavaScript**.
    *https://www.internetlivestats.com/total-number-of-websites
    **https://w3techs.com/technologies/details/cp-javascript
    

    View Slide

15. Why is this bad news for the apocalypse?
    

    View Slide

16. https://mobile.twitter.com/home
    

    View Slide

17. https://mobile.twitter.com/home
    37 JavaScript (1.44MB)
    27 JSON/other
    9 image files
    

    View Slide

18. https://mobile.twitter.com/home
    

    View Slide

19. https://mobile.twitter.com/home
    5.8 seconds
    

    View Slide

20. https://mobile.twitter.com/home
    

    View Slide

21. That’s a lot of requests for
    JavaScript.
    

    View Slide

22. That’s a lot of requests for
    JavaScript.
    And they’re pretty expensive.
    

    View Slide

23. And they’re pretty expensive.
    It takes time to load.
    

    View Slide

24. It takes time to load.
    Plus, it might fail.
    

    View Slide

25. https://twitter.com/philhawksworth/status/990890920672456707
    

    View Slide

26. https://twitter.com/philhawksworth/status/990890920672456707
    156 million failed requests for
    JavaScript each year
    — for BuzzFeed alone.
    

    View Slide

27. https://twitter.com/philhawksworth/status/990890920672456707
    156 million failed requests for
    JavaScript each year
    — for BuzzFeed alone.
    That’s potentially 2.964e+16 or
    29,640,000,000,000,000,000
    failed JavaScript requests
    on the web each year.
    

    View Slide

28. https://twitter.com/philhawksworth/status/990890920672456707
    (Based on %age of all websites that use JS,
    assuming all websites have the same
    traffic as BuzzFeed 🙈)
    That’s potentially 2.964e+16 or
    29,640,000,000,000,000,000
    failed JavaScript requests
    on the web each year.
    156 million failed requests for
    JavaScript each year
    — for BuzzFeed alone.
    

    View Slide

29. In the apocalypse,
    time-to-interactive is the difference
    between life and death.
    

    View Slide

30. In the apocalypse,
    time-to-interactive is the difference
    between life and death.
    How can we serve critical
    content faster?
    

    View Slide

31. Do we abandon JavaScript?
    

    View Slide

32. https://jamstack.org/what-is-jamstack/
    

    View Slide

33. https://jamstack.org/what-is-jamstack/
    

    View Slide

34. BUT
    

    View Slide

35. Does modern Jamstack
    really solve this problem?
    BUT
    

    View Slide

36. https://whitep4nth3r.com/
    https://whitep4nth3r.com/
    

    View Slide

37. https://whitep4nth3r.com/
    https://whitep4nth3r.com/
    > 30 JavaScript files
    

    View Slide

38. https://whitep4nth3r.com/
    https://whitep4nth3r.com/
    HTML document
    

    View Slide

39. BUT
    

    View Slide

40. Why do we need all this JavaScript
    when the document has already loaded?
    BUT
    

    View Slide

41. Why do we need all this JavaScript
    when the document has already loaded?
    Let’s turn
    off JavaScript.
    

    View Slide

42. https://whitep4nth3r.com/
    

    View Slide

43. https://whitep4nth3r.com/
    

    View Slide

44. https://whitep4nth3r.com/
    It still works!
    

    View Slide

45. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    

    View Slide

46. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    

    View Slide

47. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    

    View Slide

48. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    

    View Slide

49. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    

    View Slide

50. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    300KB 1.4MB
    

    View Slide

51. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    781KB 3.6MB
    UNCOMPRESSED?
    

    View Slide

52. https://whitep4nth3r.com/
    🚫 JavaScript Disabled ✅ JavaScript Enabled
    781KB 3.6MB
    UNCOMPRESSED?
    🤯
    

    View Slide

53. I did an experiment.
    

    View Slide

54. 🚫 JavaScript Disabled
    

    View Slide

55. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    Statically Generated
    105KB
    4.72s
    

    View Slide

56. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    https://csr-vs-ssg.netlify.app/csr/page
    Statically Generated
    105KB
    4.72s
    Client-Side Rendered
    92.7KB
    4.59s
    

    View Slide

57. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    https://csr-vs-ssg.netlify.app/csr/page
    Statically Generated
    105KB
    4.72s
    Client-Side Rendered
    92.7KB
    4.59s
    🚨 NO CONTENT 🚨
    

    View Slide

58. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    https://csr-vs-ssg.netlify.app/csr/page https://static-html-page.netlify.app
    Statically Generated
    105KB
    4.72s
    Client-Side Rendered
    92.7KB
    4.59s
    No framework
    100KB
    4.71s
    🚨 NO CONTENT 🚨
    

    View Slide

59. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    https://static-html-page.netlify.app
    Statically Generated
    105KB
    4.72s
    No framework
    100KB
    4.71s
    

    View Slide

60. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    https://static-html-page.netlify.app
    Statically Generated
    105KB
    4.72s
    No framework
    100KB
    4.71s
    

    View Slide

61. https://csr-vs-ssg.netlify.app/ssg/page
    🚫 JavaScript Disabled
    https://static-html-page.netlify.app
    Statically Generated
    105KB
    4.72s
    No framework
    100KB
    4.71s
    

    View Slide

62. These Jamstack frameworks
    are pretty good.
    

    View Slide

63. But always use your judgement.
    

    View Slide

64. Accessibility for
    slow connections?
    

    View Slide

65. Websites must work without
    JavaScript in the apocalypse.
    

    View Slide

66. Websites must work without
    JavaScript in the apocalypse.
    Decrease load time.
    

    View Slide

67. Websites must work without
    JavaScript in the apocalypse.
    Decrease load time.
    Decrease page weight.
    

    View Slide

68. There is no progressive
    enhancement in the apocalypse.
    

    View Slide

69. ACCESSIBILITY FOR
    BROKEN SCREENS.
    

    View Slide

70. Screens are broken.
    

    View Slide

71. You can’t see fancy website
    designs and animations anymore.
    

    View Slide

72. Websites
    100%
    There are almost 2 billion
    websites in the world*.
    *https://www.internetlivestats.com/total-number-of-websites
    

    View Slide

73. CSS
    96%
    No CSS
    4%
    There are almost 2 billion
    websites in the world*.
    96% of those websites use
    CSS**.
    *https://www.internetlivestats.com/total-number-of-websites
    **https://w3techs.com/technologies/overview/site_element
    

    View Slide

74. Why is this bad news for the apocalypse?
    

    View Slide

75. https://developers.google.com/web/fundamentals/performance/
    critical-rendering-path/render-blocking-css
    

    View Slide

76. https://developers.google.com/web/fundamentals/performance/
    critical-rendering-path/render-blocking-css
    

    View Slide

77. https://developers.google.com/web/fundamentals/performance/
    critical-rendering-path/render-blocking-css
    

    View Slide

78. In the apocalypse,
    time-to-interactive is the difference
    between life and death.
    

    View Slide

79. In the apocalypse,
    time-to-interactive is the difference
    between life and death.
    How can we serve critical
    content faster?
    

    View Slide

80. Do we abandon CSS?
    

    View Slide

81. Go big or go home.
    

    View Slide

82. Go big small or go home die.
    

    View Slide

83. Let’s make the static html page
    as small as possible.
    Go big small or go home die.
    

    View Slide

84. Remove CSS and class names.
    Go big small or go home die.
    

    View Slide

85. Go big small or go home die.
    
    
    Remove CSS and class names.
    

    View Slide

86. Remove all CSS and class names
    Go big small or go home die.
    
    
    

    View Slide

87. Remove font imports.
    Go big small or go home die.
    

    View Slide

88. Go big small or go home die.
    Remove font imports.
    
    href="https:///fonts.googleapis.com/…&display=swap"
    //>
    

    View Slide

89. Go big small or go home die.
    Remove font imports.
    
    href="https:///fonts.googleapis.com/…&display=swap"
    //>
    

    View Slide

90. Remove SVGs.
    Go big small or go home die.
    

    View Slide

91. Remove SVGs.
    Go big small or go home die.
    href="https:///whitep4nth3r.com/topics/javascript"
    class="topics__topicLink"
    aria-label="View all JavaScript articles"
    >
    
    
    fill="currentColor"
    d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7
    12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7
    20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.
    24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7
    25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"
    ><
    <
    <
    JavaScript
    <
    

    View Slide

92. Remove SVGs.
    Go big small or go home die.
    href="https:///whitep4nth3r.com/topics/javascript"
    class="topics__topicLink"
    aria-label="View all JavaScript articles"
    >
    
    
    fill="currentColor"
    d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7
    12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7
    20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.
    24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7
    25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z"
    ><
    <
    <
    JavaScript
    <
    

    View Slide

93. Remove SVGs.
    Go big small or go home die.
    aria-label="View all JavaScript articles">
    JavaScript
    <
    

    View Slide

94. Go big small or go home die.
    Remove SVGs.
    And optimise!
    
    View all JavaScript articles
    <
    

    View Slide

95. Replace favicon with a sneaky 0KB favicon.
    Go big small or go home die.
    

    View Slide

96. Go big small or go home die.
    Replace favicon with a sneaky 0KB favicon.
    https://base64-to-image.com/
    

    View Slide

97. Replace favicon with a sneaky 0KB favicon.
    Go big small or go home die.
    
    

    View Slide

98. Replace favicon with a sneaky 0KB favicon.
    Go big small or go home die.
    
    href=“data:image/x-icon;base64,A_LONG_STRING=“
    rel="icon"
    type="image/x-icon"
    //>
    

    View Slide

99. https://static-html-page-no-css.netlify.app
    Go big small or go home die.
    

    View Slide

100. http://motherfuckingwebsite.com/
     https://static-html-page-no-css.netlify.app
     Go big small or go home die.
     

     View Slide

101. http://motherfuckingwebsite.com/
     https://static-html-page-no-css.netlify.app
     Go big small or go home die.
     LIGHWEIGHT
     RESPONSIVE
     IT JUST WORKS
     

     View Slide

102. No framework
     100KB
     4.71s
     No CSS
     4.6KB
     2.10s
     https://static-html-page.netlify.app https://static-html-page-no-css.netlify.app
     Go big small or go home die.
     

     View Slide

103. No framework
     100KB
     4.71s
     No CSS
     4.6KB
     2.10s
     https://static-html-page.netlify.app https://static-html-page-no-css.netlify.app
     Go big small or go home die.
     

     View Slide

104. Go big small or go home die.
     

     View Slide

105. In 2021, WebAIM surveyed
     1 million home pages for a11y*.
     *https://webaim.org/projects/million/
     

     View Slide

106. In 2021, WebAIM surveyed
     1 million home pages for a11y*.
     Across the 1 million home pages,
     51,379,694 distinct a11y errors were detected.
     *https://webaim.org/projects/million/
     

     View Slide

107. In 2021, WebAIM surveyed
     1 million home pages for a11y*.
     Across the 1 million home pages,
     51,379,694 distinct a11y errors were detected.
     *https://webaim.org/projects/million/
     That’s an average of 51.4 errors per page.
     

     View Slide

108. What’s going wrong?
     

     View Slide

109. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4
     Missing alternative text for images 60.6
     Missing form input labels 54.4
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

110. WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4
     Missing alternative text for images 60.6
     Missing form input labels 54.4
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     

     View Slide

111. WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6
     Missing form input labels 54.4
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     

     View Slide

112. https://youtube.com
     

     View Slide

113. https://youtube.com
     

     View Slide

114. https://youtube.com
     
     

     View Slide

115. https://youtube.com
     
     

     View Slide

116. *https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe
     https://youtube.com
     

     View Slide

117. *https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe
     https://youtube.com
     

     View Slide

118. No CSS. No problems!
     

     View Slide

119. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6
     Missing form input labels 54.4
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

120. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

121. https://www.aliexpress.com/index.html
     

     View Slide

122. https://www.aliexpress.com/index.html
     

     View Slide

123. 
     
     
     
     <
     <
     <
     https://www.aliexpress.com/index.html
     

     View Slide

124. 
     
     
     
     <
     <
     <
     https://www.aliexpress.com/index.html
     

     View Slide

125. If it’s hidden, it doesn’t matter!
     

     View Slide

126. If it’s hidden, it doesn’t matter!
     

     View Slide

127. Whenever you think about hiding
     something from any audience, better ask
     yourself whether this is really a good
     solution.
     accessibility-developer-guide.com
     https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/
     

     View Slide

128. Most of the time it is better to create a
     solution that works the same way for
     everybody, and which does not need any
     shaky ARIA.
     accessibility-developer-guide.com
     https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/
     Whenever you think about hiding
     something from any audience, better ask
     yourself whether this is really a good
     solution.
     

     View Slide

129. The fix:
     

     View Slide

130. The fix:
     src="https:///path.to/image.png"
     alt="This is a great image description!”
     height="1080"
     width="1920"
     //>
     

     View Slide

131. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

132. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

133. View Slide

134. View Slide

135. View Slide

136. https://alexlakatos.com/404
     

     View Slide

137. https://alexlakatos.com/404
     

     View Slide

138. https://alexlakatos.com/404
     

     View Slide

139. https://alexlakatos.com/404
     

     View Slide

140. https://alexlakatos.com/404
     

     View Slide

141. Did the page really need a form?
     

     View Slide

142. https://alexlakatos.com/404
     

     View Slide

143. https://alexlakatos.com/404
     underscore new line forward slash
     space underscore space backslash
     space underscore underscore
     underscore underscore space
     underscore space underscore
     underscore underscore…
     

     View Slide

144. The fix:
     

     View Slide

145. aria-label="ASCII art of Oops..... 404">
     https://alexlakatos.com/404
     

     View Slide

146. https://alexlakatos.com/404
     

     View Slide

147. Fancy.
     

     View Slide

148. Functional.
     Fancy.
     

     View Slide

149. Let’s talk about placeholders.
     

     View Slide

150. Placeholders are not labels.
     Let’s talk about placeholders.
     

     View Slide

151. The placeholder attribute specifies a short
     hint that describes the expected value of
     an input field (e.g. a sample value or a
     short description of the expected format).
     w3schools.com
     https://www.w3schools.com/TAGS/att_input_placeholder.asp
     

     View Slide

152. https://www.aliexpress.com/index.html
     

     View Slide

153. https://www.aliexpress.com/index.html
     

     View Slide

154. Without a label,
     that placeholder is meaningless.
     

     View Slide

155. A good form input:
     

     View Slide

156. A good form input:
     First name<
     name="firstName"
     type="text"
     placeholder="Salma"
     //>
     

     View Slide

157. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

158. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

159. https://www.aliexpress.com/index.html
     

     View Slide

160. https://www.aliexpress.com/index.html
     

     View Slide

161. https://www.aliexpress.com/index.html
     

     View Slide

162. https://www.aliexpress.com/index.html
     

     View Slide

163. What will happen if I
     click on this link?
     

     View Slide

164. What will happen if I
     click on this link?
     🤷
     

     View Slide

165. And it’s not just empty links
     that are problematic.
     

     View Slide

166. https://www.aliexpress.com/index.html
     

     View Slide

167. https://www.aliexpress.com/index.html
     

     View Slide

168. https://www.aliexpress.com/index.html
     

     View Slide

169. https://www.aliexpress.com/index.html
     
     <
     0<
     <
     

     View Slide

170. https://www.aliexpress.com/index.html
     
     <
     0<
     <
     

     View Slide

171. https://www.aliexpress.com/index.html
     
     <
     0<
     <
     

     View Slide

172. https://www.aliexpress.com/index.html
     

     View Slide

173. What even is this?
     

     View Slide

174. The fix:
     

     View Slide

175. The fix:
     aria-label="You have 0 items in your
     basket. Go to basket.">
     <
     0<
     <
     

     View Slide

176. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language attribute 28.9
     Empty buttons 26.9
     

     View Slide

177. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language attribute 28.9 HTML
     Empty buttons 26.9
     

     View Slide

178. In the example of a screen reader, the synthesizer
     needs to know which language the content is in
     order to pronounce the output correctly. Otherwise,
     it will be hard to understand, even if you know the
     other language.
     accessibility-developer-guide.com
     https://www.accessibility-developer-guide.com/examples/html_boilerplate/
     

     View Slide

179. https://www.aliexpress.com/index.html
     

     View Slide

180. https://www.aliexpress.com/index.html
     

     View Slide

181. https://www.aliexpress.com/index.html
     

     View Slide

182. The fix:
     

     View Slide

183. The fix:
     
     

     View Slide

184. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language 28.9 HTML
     Empty buttons 26.9
     

     View Slide

185. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language 28.9 HTML
     Empty buttons 26.9 HTML
     

     View Slide

186. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language 28.9 HTML
     Empty buttons 26.9 HTML + CSS
     

     View Slide

187. https://www.aliexpress.com/index.html
     

     View Slide

188. https://www.aliexpress.com/index.html
     

     View Slide

189. 
     <
     <
     https://www.aliexpress.com/index.html
     

     View Slide

190. 
     <
     <
     https://www.aliexpress.com/index.html
     .next-icon-add:before {
     content: " ";
     }
     

     View Slide

191. 
     <
     <
     https://www.aliexpress.com/index.html
     .next-icon-add:before {
     content: "+";
     }
     

     View Slide

192. https://www.aliexpress.com/index.html
     

     View Slide

193. View Slide

194. The fix:
     

     View Slide

195. The fix:
     type="button"
     aria-label="Increase quantity">
     +
     <
     

     View Slide

196. Most common WCAG* 2 failures (Feb 2021)
     *Web Content Accessibility Guidelines 2
     WCAG FAILURE TYPE % OF HOME PAGES CAUSED BY
     Low contrast text 86.4 CSS
     Missing alternative text for images 60.6 HTML
     Missing form input labels 54.4 HTML
     Empty links 51.3 HTML
     Missing document language 28.9 HTML
     Empty buttons 26.9 HTML + CSS
     

     View Slide

197. Accessibility for
     broken screens?
     

     View Slide

198. Don’t fake content with CSS.
     

     View Slide

199. Don’t fake content with CSS.
     Use semantic HTML.
     

     View Slide

200. Don’t fake content with CSS.
     Use semantic HTML.
     If the web is unusable
     in the apocalypse —
     

     View Slide

201. Everyone dies.
     

     View Slide

202. WHY IS ALL OF THIS
     IMPORTANT, NOW?
     

     View Slide

203. Let’s recap.
     

     View Slide

204. How do we prepare the web
     for the apocalypse of 2031?
     

     View Slide

205. Start with semantic HTML.
     

     View Slide

206. Use minimal CSS.
     Start with semantic HTML.
     

     View Slide

207. Use as little JavaScript as possible.
     Use minimal CSS.
     Start with semantic HTML.
     

     View Slide

208. And why is this
     important, now?
     

     View Slide

209. Worldwide,
     the internet is slow.
     

     View Slide

210. https://worldpopulationreview.com/country-rankings/internet-speeds-by-country
     55.13Mbs
     

     View Slide

211. export const Slow3GConditions = {
     title: Common.UIString.UIString("Slow 3G"),
     download: 500 * 1024 / 8 * 0.8,
     upload: 500 * 1024 / 8 * 0.8,
     latency: 400 * 5,
     };
     Chromium Dev Tools Slow 3G
     55.13Mbs
     

     View Slide

212. 55.13Mbs 51.2Mbs
     export const Slow3GConditions = {
     title: Common.UIString.UIString("Slow 3G"),
     download: 500 * 1024 / 8 * 0.8,
     upload: 500 * 1024 / 8 * 0.8,
     latency: 400 * 5,
     };
     Chromium Dev Tools Slow 3G
     

     View Slide

213. 55.13Mbs ≈ 51.2Mbs
     

     View Slide

214. Globally, at least 2.2 billion people
     have a near or distance vision impairment.
     https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment
     

     View Slide

215. And not all users of screen readers
     have vision impairments.
     https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
     

     View Slide

216. https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
     

     View Slide

217. https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
     

     View Slide

218. Google now uses Core Web Vitals
     as a ranking factor in search results*.
     *https://web.dev/performance-scoring/ — roll-out from mid-June 2021
     

     View Slide

219. Largest Contentful Paint
     Core Web Vitals
     

     View Slide

220. Largest Contentful Paint
     How quickly does the page render?
     Core Web Vitals
     

     View Slide

221. Largest Contentful Paint
     First Input Delay
     Core Web Vitals
     

     View Slide

222. First Input Delay
     How quickly does the page
     respond to user input?
     Largest Contentful Paint
     Core Web Vitals
     

     View Slide

223. First Input Delay
     Cumulative Layout Shift
     Core Web Vitals
     Largest Contentful Paint
     

     View Slide

224. Cumulative Layout Shift
     How stable is the
     page layout?
     First Input Delay
     Core Web Vitals
     Largest Contentful Paint
     

     View Slide

225. Cumulative Layout Shift
     Largest Contentful Paint
     First Input Delay
     Core Web Vitals
     

     View Slide

226. Cumulative Layout Shift
     Largest Contentful Paint
     First Input Delay
     Core Web Vitals
     

     View Slide

227. Cumulative Layout Shift
     Largest Contentful Paint
     First Input Delay
     Core Web Vitals
     Get content to your users as fast as possible.
     

     View Slide

228. Core Web Vitals
     Get content to your users as fast as possible.
     Make your web application usable as soon as possible.
     Cumulative Layout Shift
     Largest Contentful Paint
     First Input Delay
     

     View Slide

229. Core Web Vitals
     Get content to your users as fast as possible.
     Make your web application usable as soon as possible.
     Make your web application as stable as possible.
     Cumulative Layout Shift
     Largest Contentful Paint
     First Input Delay
     

     View Slide

230. Or risk being forgotten
     in the apocalypse.
     

     View Slide

231. Photo by Brian McGowan on Unsplash
     

     View Slide

232. Billions of people use the internet
     on a slow connection.
     

     View Slide

233. Millions of people use the internet
     via a screen reader.
     Billions of people use the internet
     on a slow connection.
     

     View Slide

234. Millions of people use the internet
     via a screen reader.
     Billions of people use the internet
     on a slow connection.
     People won’t find your website
     if it’s not performant or accessible.
     

     View Slide

235. The apocalypse of 2031
     might not happen.
     

     View Slide

236. But if it does?
     

     View Slide

237. We’ll be prepared.
     

     View Slide

238. BUILD STUFF,
     LEARN THINGS,
     LOVE WHAT YOU DO.
     @whitep4nth3r
     

     View Slide

239. THANK YOU!
     @whitep4nth3r
     https://whitep4nth3r.com
     

     View Slide