Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

How to prevent the collapse of society by build...

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.

Salma Alam-Naylor

June 23, 2021
Tweet

More Decks by Salma Alam-Naylor

Other Decks in Technology

Transcript

  1. 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
  2. And why is this important, now? How do we prepare

    the web for the apocalypse of 2031?
  3. Websites 100% There are almost 2 billion websites in the

    world*. *https://www.internetlivestats.com/total-number-of-websites
  4. 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
  5. 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.
  6. 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.
  7. In the apocalypse, time-to-interactive is the difference between life and

    death. How can we serve critical content faster?
  8. BUT

  9. BUT

  10. Why do we need all this JavaScript when the document

    has already loaded? Let’s turn off JavaScript.
  11. Websites 100% There are almost 2 billion websites in the

    world*. *https://www.internetlivestats.com/total-number-of-websites
  12. 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
  13. In the apocalypse, time-to-interactive is the difference between life and

    death. How can we serve critical content faster?
  14. Go big small or go home die. <link href="styles.css" rel="stylesheet"

    //> <header class="header"> Remove CSS and class names.
  15. Remove all CSS and class names Go big small or

    go home die. <link href="styles.css" rel="stylesheet" //> <header class="header">
  16. 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" //>
  17. 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" //>
  18. 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>
  19. 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>
  20. Remove SVGs. Go big small or go home die. <a

    href="https:///whitep4nth3r.com/topics/javascript" aria-label="View all JavaScript articles"> JavaScript <</a>
  21. Go big small or go home die. Remove SVGs. And

    optimise! <a href="https:///whitep4nth3r.com/topics/javascript"> View all JavaScript articles <</a>
  22. Go big small or go home die. Replace favicon with

    a sneaky 0KB favicon. https://base64-to-image.com/
  23. Replace favicon with a sneaky 0KB favicon. Go big small

    or go home die. <link rel="icon" href=“/favicon.ico” type="image/x-icon" //>
  24. 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" //>
  25. In 2021, WebAIM surveyed 1 million home pages for a11y*.

    *https://webaim.org/projects/million/
  26. 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/
  27. 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.
  28. 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
  29. 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
  30. 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
  31. 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; }
  32. 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
  33. 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
  34. 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/
  35. 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.
  36. 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
  37. 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
  38. https://alexlakatos.com/404 underscore new line forward slash space underscore space backslash

    space underscore underscore underscore underscore space underscore space underscore underscore underscore…
  39. 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
  40. 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
  41. 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
  42. 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>
  43. 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
  44. 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
  45. 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/
  46. 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
  47. 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
  48. 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
  49. 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
  50. Don’t fake content with CSS. Use semantic HTML. If the

    web is unusable in the apocalypse —
  51. 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
  52. 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
  53. 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
  54. And not all users of screen readers have vision impairments.

    https://webaim.org/projects/screenreadersurvey7/#disabilitytypes (2017)
  55. Google now uses Core Web Vitals as a ranking factor

    in search results*. *https://web.dev/performance-scoring/ — roll-out from mid-June 2021
  56. First Input Delay How quickly does the page respond to

    user input? Largest Contentful Paint Core Web Vitals
  57. Cumulative Layout Shift How stable is the page layout? First

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

    Web Vitals Get content to your users as fast as possible.
  59. 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
  60. 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
  61. Millions of people use the internet via a screen reader.

    Billions of people use the internet on a slow connection.
  62. 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.