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

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

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.

Dcc5cf3b89d276443d2ce6745d7ef480?s=128

whitep4nth3r

June 23, 2021
Tweet

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.
  8. None
  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
  133. None
  134. None
  135. None
  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

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