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.
2. @whitep4nth3r https://whitep4nth3r.com HI FRIENDS, I’M SALMA. I help developers build stuff, learn things, and love what they do.
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
4. IT’S 2031.
5. The apocalypse has arrived.
6. The internet is running on a slow 3G connection.
7. Display screens are broken. The internet is running on a slow 3G connection.
9. Accessibility on the web is paramount to the survival of the human race.
10. How do we prepare the web for the apocalypse of 2031?
11. And why is this important, now? How do we prepare the web for the apocalypse of 2031?
12. ACCESSIBILITY FOR SLOW CONNECTIONS.
13. Websites 100% There are almost 2 billion websites in the world*. *https://www.internetlivestats.com/total-number-of-websites
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
15. Why is this bad news for the apocalypse?
16. https://mobile.twitter.com/home
17. https://mobile.twitter.com/home 37 JavaScript (1.44MB) 27 JSON/other 9 image files
18. https://mobile.twitter.com/home
19. https://mobile.twitter.com/home 5.8 seconds
20. https://mobile.twitter.com/home
21. That’s a lot of requests for JavaScript.
22. That’s a lot of requests for JavaScript. And they’re pretty expensive.
23. And they’re pretty expensive. It takes time to load.
24. It takes time to load. Plus, it might fail.
25. https://twitter.com/philhawksworth/status/990890920672456707
26. https://twitter.com/philhawksworth/status/990890920672456707 156 million failed requests for JavaScript each year — for BuzzFeed alone.
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.
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.
29. In the apocalypse, time-to-interactive is the difference between life and death.
30. In the apocalypse, time-to-interactive is the difference between life and death. How can we serve critical content faster?
31. Do we abandon JavaScript?
32. https://jamstack.org/what-is-jamstack/
33. https://jamstack.org/what-is-jamstack/
34. BUT
35. Does modern Jamstack really solve this problem? BUT
36. https://whitep4nth3r.com/ https://whitep4nth3r.com/
37. https://whitep4nth3r.com/ https://whitep4nth3r.com/ > 30 JavaScript files
38. https://whitep4nth3r.com/ https://whitep4nth3r.com/ HTML document
39. BUT
40. Why do we need all this JavaScript when the document has already loaded? BUT
41. Why do we need all this JavaScript when the document has already loaded? Let’s turn off JavaScript.
42. https://whitep4nth3r.com/
43. https://whitep4nth3r.com/
44. https://whitep4nth3r.com/ It still works!
45. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled
46. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled
47. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled
48. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled
49. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled
50. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled 300KB 1.4MB
51. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled 781KB 3.6MB UNCOMPRESSED?
52. https://whitep4nth3r.com/ 🚫 JavaScript Disabled ✅ JavaScript Enabled 781KB 3.6MB UNCOMPRESSED? 🤯
53. I did an experiment.
54. 🚫 JavaScript Disabled
55. https://csr-vs-ssg.netlify.app/ssg/page 🚫 JavaScript Disabled Statically Generated 105KB 4.72s
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
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 🚨
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 🚨
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
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
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
62. These Jamstack frameworks are pretty good.
63. But always use your judgement.
64. Accessibility for slow connections?
65. Websites must work without JavaScript in the apocalypse.
66. Websites must work without JavaScript in the apocalypse. Decrease load time.
67. Websites must work without JavaScript in the apocalypse. Decrease load time. Decrease page weight.
68. There is no progressive enhancement in the apocalypse.
69. ACCESSIBILITY FOR BROKEN SCREENS.
70. Screens are broken.
71. You can’t see fancy website designs and animations anymore.
72. Websites 100% There are almost 2 billion websites in the world*. *https://www.internetlivestats.com/total-number-of-websites
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
74. Why is this bad news for the apocalypse?
75. https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-blocking-css
76. https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-blocking-css
77. https://developers.google.com/web/fundamentals/performance/ critical-rendering-path/render-blocking-css
78. In the apocalypse, time-to-interactive is the difference between life and death.
79. In the apocalypse, time-to-interactive is the difference between life and death. How can we serve critical content faster?
80. Do we abandon CSS?
81. Go big or go home.
82. Go big small or go home die.
83. Let’s make the static html page as small as possible. Go big small or go home die.
84. Remove CSS and class names. Go big small or go home die.
85. Go big small or go home die. <link href="styles.css" rel="stylesheet" //> <header class="header"> Remove CSS and class names.
86. Remove all CSS and class names Go big small or go home die. <link href="styles.css" rel="stylesheet" //> <header class="header">
87. Remove font imports. Go big small or go home die.
88. Go big small or go home die. Remove font imports. <link rel="preconnect" href="https:///fonts.gstatic.com" //> <link rel="stylesheet" href="https:///fonts.googleapis.com/…&display=swap" //>
89. Go big small or go home die. Remove font imports. <link rel="preconnect" href="https:///fonts.gstatic.com" //> <link rel="stylesheet" href="https:///fonts.googleapis.com/…&display=swap" //>
90. Remove SVGs. Go big small or go home die.
91. Remove SVGs. Go big small or go home die. <a href="https:///whitep4nth3r.com/topics/javascript" class="topics__topicLink" aria-label="View all JavaScript articles" > <span class="topics__topicSvgContainer"> <svg aria-hidden="true" xmlns="http:///wwwww.w3.org/2000/svg" viewBox="0 0 448 512"> <path 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" ><</path> <</svg> <</span> JavaScript <</a>
92. Remove SVGs. Go big small or go home die. <a href="https:///whitep4nth3r.com/topics/javascript" class="topics__topicLink" aria-label="View all JavaScript articles" > <span class="topics__topicSvgContainer"> <svg aria-hidden="true" xmlns="http:///wwwww.w3.org/2000/svg" viewBox="0 0 448 512"> <path 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" ><</path> <</svg> <</span> JavaScript <</a>
93. Remove SVGs. Go big small or go home die. <a href="https:///whitep4nth3r.com/topics/javascript" aria-label="View all JavaScript articles"> JavaScript <</a>
94. Go big small or go home die. Remove SVGs. And optimise! <a href="https:///whitep4nth3r.com/topics/javascript"> View all JavaScript articles <</a>
95. Replace favicon with a sneaky 0KB favicon. Go big small or go home die.
96. Go big small or go home die. Replace favicon with a sneaky 0KB favicon. https://base64-to-image.com/
97. Replace favicon with a sneaky 0KB favicon. Go big small or go home die. <link rel="icon" href=“/favicon.ico” type="image/x-icon" //>
98. Replace favicon with a sneaky 0KB favicon. Go big small or go home die. <link rel="icon" href=“/favicon.ico” type="image/x-icon" //> <link href=“data:image/x-icon;base64,A_LONG_STRING=“ rel="icon" type="image/x-icon" //>
99. https://static-html-page-no-css.netlify.app Go big small or go home die.
100. http://motherfuckingwebsite.com/ https://static-html-page-no-css.netlify.app Go big small or go home die.
101. http://motherfuckingwebsite.com/ https://static-html-page-no-css.netlify.app Go big small or go home die. LIGHWEIGHT RESPONSIVE IT JUST WORKS
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.
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.
104. Go big small or go home die.
105. In 2021, WebAIM surveyed 1 million home pages for a11y*. *https://webaim.org/projects/million/
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/
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.
108. What’s going wrong?
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
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
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
112. https://youtube.com
113. https://youtube.com
114. https://youtube.com <div id=“copyright" style="display: none"> <div dir="ltr" style="display: inline”> © 2021 Google LLC <</div> <</div>
115. https://youtube.com <div id=“copyright" style="display: none"> <div dir="ltr" style="display: inline”> © 2021 Google LLC <</div> <</div> #copyright { background: #fefeff; color: #909090; }
116. *https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe https://youtube.com
117. *https://chrome.google.com/webstore/detail/colour-contrast-checker/nmmjeclfkgjdomacpcflgdkgpphpmnfe https://youtube.com
118. No CSS. No problems!
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
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
121. https://www.aliexpress.com/index.html
122. https://www.aliexpress.com/index.html
123. <div aria-hidden="true"> <div> <a class="_3RrZV" href="https:///some.link.com"> <img src="https:///some_image_url.png" //> <</a> <</div> <</div> https://www.aliexpress.com/index.html
124. <div aria-hidden="true"> <div> <a class="_3RrZV" href="https:///some.link.com"> <img src="https:///some_image_url.png" //> <</a> <</div> <</div> https://www.aliexpress.com/index.html
125. If it’s hidden, it doesn’t matter!
126. If it’s hidden, it doesn’t matter!
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/
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.
129. The fix:
130. The fix: <img src="https:///path.to/image.png" alt="This is a great image description!” height="1080" width="1920" //>
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
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
136. https://alexlakatos.com/404
137. https://alexlakatos.com/404
138. https://alexlakatos.com/404
139. https://alexlakatos.com/404
140. https://alexlakatos.com/404
141. Did the page really need a form?
142. https://alexlakatos.com/404
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…
144. The fix:
145. <div role="img" aria-label="ASCII art of Oops..... 404"> https://alexlakatos.com/404
146. https://alexlakatos.com/404
147. Fancy.
148. Functional. Fancy.
149. Let’s talk about placeholders.
150. Placeholders are not labels. Let’s talk about placeholders.
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
152. https://www.aliexpress.com/index.html
153. https://www.aliexpress.com/index.html
154. Without a label, that placeholder is meaningless.
155. A good form input:
156. A good form input: <label for="firstName">First name<</label> <input id="firstName" name="firstName" type="text" placeholder="Salma" //>
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
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
159. https://www.aliexpress.com/index.html
160. https://www.aliexpress.com/index.html
161. https://www.aliexpress.com/index.html
162. https://www.aliexpress.com/index.html
163. What will happen if I click on this link?
164. What will happen if I click on this link? 🤷
165. And it’s not just empty links that are problematic.
166. https://www.aliexpress.com/index.html
167. https://www.aliexpress.com/index.html
168. https://www.aliexpress.com/index.html
169. https://www.aliexpress.com/index.html <a href="https:///link.to.cart"> <i class="right-cart-icon"><</i> <span>0<</span> <</a>
170. https://www.aliexpress.com/index.html <a href="https:///link.to.cart"> <i class="right-cart-icon"><</i> <span>0<</span> <</a>
171. https://www.aliexpress.com/index.html <a href="https:///link.to.cart"> <i class="right-cart-icon"><</i> <span>0<</span> <</a>
172. https://www.aliexpress.com/index.html
173. What even is this?
174. The fix:
175. The fix: <a href="https:///link.to.cart" aria-label="You have 0 items in your basket. Go to basket."> <i class="right-cart-icon"><</i> <span>0<</span> <</a>
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
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
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/
179. https://www.aliexpress.com/index.html
180. https://www.aliexpress.com/index.html
181. https://www.aliexpress.com/index.html
182. The fix:
183. The fix: <html lang="en">
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
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
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
187. https://www.aliexpress.com/index.html
188. https://www.aliexpress.com/index.html
189. <button type="button" class="next-btn....."> <i class="next-icon-add…"><</i> <</button> https://www.aliexpress.com/index.html
190. <button type="button" class="next-btn....."> <i class="next-icon-add…"><</i> <</button> https://www.aliexpress.com/index.html .next-icon-add:before { content: " "; }
191. <button type="button" class="next-btn....."> <i class="next-icon-add…"><</i> <</button> https://www.aliexpress.com/index.html .next-icon-add:before { content: "+"; }
192. https://www.aliexpress.com/index.html
194. The fix:
195. The fix: <button type="button" aria-label="Increase quantity"> + <</button>
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
197. Accessibility for broken screens?
198. Don’t fake content with CSS.
199. Don’t fake content with CSS. Use semantic HTML.
200. Don’t fake content with CSS. Use semantic HTML. If the web is unusable in the apocalypse —
201. Everyone dies.
202. WHY IS ALL OF THIS IMPORTANT, NOW?
203. Let’s recap.
204. How do we prepare the web for the apocalypse of 2031?
205. Start with semantic HTML.
206. Use minimal CSS. Start with semantic HTML.
207. Use as little JavaScript as possible. Use minimal CSS. Start with semantic HTML.
208. And why is this important, now?
209. Worldwide, the internet is slow.
210. https://worldpopulationreview.com/country-rankings/internet-speeds-by-country 55.13Mbs
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
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
213. 55.13Mbs ≈ 51.2Mbs
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
215. And not all users of screen readers have vision impairments. https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
216. https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
217. https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
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
219. Largest Contentful Paint Core Web Vitals
220. Largest Contentful Paint How quickly does the page render? Core Web Vitals
221. Largest Contentful Paint First Input Delay Core Web Vitals
222. First Input Delay How quickly does the page respond to user input? Largest Contentful Paint Core Web Vitals
223. First Input Delay Cumulative Layout Shift Core Web Vitals Largest Contentful Paint
224. Cumulative Layout Shift How stable is the page layout? First Input Delay Core Web Vitals Largest Contentful Paint
225. Cumulative Layout Shift Largest Contentful Paint First Input Delay Core Web Vitals
226. Cumulative Layout Shift Largest Contentful Paint First Input Delay Core Web Vitals
227. Cumulative Layout Shift Largest Contentful Paint First Input Delay Core Web Vitals Get content to your users as fast as possible.
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
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
230. Or risk being forgotten in the apocalypse.
231. Photo by Brian McGowan on Unsplash
232. Billions of people use the internet on a slow connection.
233. Millions of people use the internet via a screen reader. Billions of people use the internet on a slow connection.
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.
235. The apocalypse of 2031 might not happen.
236. But if it does?
237. We’ll be prepared.
238. BUILD STUFF, LEARN THINGS, LOVE WHAT YOU DO. @whitep4nth3r
239. THANK YOU! @whitep4nth3r https://whitep4nth3r.com